googlemaps-samples · willum070 · Apr 10, 2025 · Apr 10, 2025 · Apr 10, 2025 · Apr 10, 2025
diff --git a/dist/index.html b/dist/index.html
@@ -22,6 +22,7 @@ <h1>Maps JSAPI Samples</h1>
   <li><a href='/samples/place-text-search/dist'>place-text-search</a></li>
   <li><a href='/samples/ui-kit-place-details/dist'>ui-kit-place-details</a></li>
   <li><a href='/samples/ui-kit-place-search/dist'>ui-kit-place-search</a></li>
+  <li><a href='/samples/ui-kit-place-search-text/dist'>ui-kit-place-search-text</a></li>
 </ul>
 </body>
 </html>
diff --git a/dist/samples/ui-kit-place-search-text/app/.eslintsrc.json b/dist/samples/ui-kit-place-search-text/app/.eslintsrc.json
@@ -0,0 +1,13 @@
+{
+  "extends": [
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "rules": {
+    "@typescript-eslint/ban-ts-comment": 0,
+    "@typescript-eslint/no-this-alias": 1,
+    "@typescript-eslint/no-empty-function": 1,
+    "@typescript-eslint/explicit-module-boundary-types": 1,
+    "@typescript-eslint/no-unused-vars": 1
+  }
+}
diff --git a/dist/samples/ui-kit-place-search-text/app/README.md b/dist/samples/ui-kit-place-search-text/app/README.md
@@ -0,0 +1,33 @@
+# Google Maps JavaScript Sample
+
+This sample is generated from @googlemaps/js-samples located at
+https://github.com/googlemaps-samples/js-api-samples.
+
+## Setup
+
+### Before starting run:
+
+`$npm i`
+
+### Run an example on a local web server
+
+First `cd` to the folder for the sample to run, then:
+
+`$npm start`
+
+### Build an individual example
+
+From `samples/`:
+
+`$npm run build --workspace=sample-name/`
+
+### Build all of the examples.
+
+From `samples/`:
+`$npm run build-all`
+
+## Feedback
+
+For feedback related to this sample, please open a new issue on
+[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues).
+
diff --git a/dist/samples/ui-kit-place-search-text/app/index.html b/dist/samples/ui-kit-place-search-text/app/index.html
@@ -0,0 +1,32 @@
+<!--
+ @license
+ Copyright 2025 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!--[START maps_ui_kit_place_search_text] -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Place List Text Search with Google Maps</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <script type="module" src="./index.js"></script>
+  </head>
+  <body>
+    <!--[START maps_ui_kit_place_search_text_map] -->
+    <gmp-map center="-37.813,144.963" zoom="10" map-id="DEMO_MAP_ID">
+      <div class="overlay" slot="control-inline-start-block-start">
+        <div class="list-container">
+          <gmp-place-list selectable></gmp-place-list>
+        </div>
+      </div>
+      <gmp-place-details size="large"></gmp-place-details>
+    </gmp-map>
+    <!--[END maps_ui_kit_place_search_text_map] -->
+    <script
+      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps&callback=initMap&v=alpha"
+      defer
+    ></script>
+  </body>
+</html>
+<!--[END maps_ui_kit_place_search_text] -->
diff --git a/dist/samples/ui-kit-place-search-text/app/index.ts b/dist/samples/ui-kit-place-search-text/app/index.ts
@@ -0,0 +1,110 @@
+/*
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_ui_kit_place_search_text] */
+/* [START maps_ui_kit_place_search_text_query_selectors] */
+const map = document.querySelector("gmp-map") as any;
+const placeList = document.querySelector("gmp-place-list") as any;
+const placeDetails = document.querySelector("gmp-place-details") as any;
+let marker = document.querySelector('gmp-advanced-marker') as any;
+/* [END maps_ui_kit_place_search_text_query_selectors] */
+/* [START maps_ui_kit_place_search_text_init_map] */
+let markers = {};
+let infoWindow;
+let center = { lat: 37.395641, lng: -122.077627 };
+
+async function initMap(): Promise<void>  {
+    await google.maps.importLibrary("places");
+    const { InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
+    const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
+
+    infoWindow = new google.maps.InfoWindow;
+
+    // Center the map
+    let adjustedCenter = offsetLatLngRight(center, -0.005);
+    map.innerMap.panTo(adjustedCenter);
+    map.innerMap.setZoom(14);
+
+    map.innerMap.setOptions({
+        mapTypeControl: false,
+        clickableIcons: false,
+    });
+
+    searchByTextRequest('tacos near me');
+}
+/* [END maps_ui_kit_place_search_text_init_map] */
+
+/* [START maps_ui_kit_place_search_text_query] */
+async function searchByTextRequest(textQuery) {
+    if (textQuery) {
+        placeList.configureFromSearchByTextRequest({
+            locationRestriction: map.innerMap.getBounds(),
+            includedType: "restaurant",
+            textQuery: textQuery,
+        }).then(addMarkers);
+        // Handle user selection in Place Details.
+        placeList.addEventListener("gmp-placeselect", ({ place }) => {
+            markers[place.id].click();
+        });
+    }
+}
+/* [END maps_ui_kit_place_search_text_query] */
+/* [START maps_ui_kit_place_search_text_add_markers] */
+async function addMarkers(){
+    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
+    const { LatLngBounds } = await google.maps.importLibrary("core") as google.maps.CoreLibrary;
+
+    const bounds = new LatLngBounds();
+
+    if(placeList.places.length > 0){
+        placeList.places.forEach((place) => {
+            let marker = new AdvancedMarkerElement({
+                map: map.innerMap,
+                position: place.location,
+            });
+
+            markers[place.id] = marker;
+            bounds.extend(place.location);
+            marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
+
+            marker.addListener('gmp-click',(event) => {
+                if(infoWindow.isOpen){
+                    infoWindow.close();
+                }
+                placeDetails.configureFromPlace(place);
+                placeDetails.style.width = "350px";
+                infoWindow.setOptions({
+                    content: placeDetails
+                });
+                infoWindow.open({
+                    anchor: marker,
+                    map: map.innerMap
+                });
+                placeDetails.addEventListener('gmp-load',() => {
+                    map.innerMap.fitBounds(place.viewport, { top: 400, left: 400 });
+                });
+
+            });
+            map.innerMap.setCenter(bounds.getCenter());
+            map.innerMap.fitBounds(bounds);
+        });
+    }
+}
+/* [END maps_ui_kit_place_search_text_add_markers] */
+
+// Helper function to offset the map center.
+function offsetLatLngRight(latLng, longitudeOffset) {
+    const newLng = latLng.lng + longitudeOffset;
+    return new google.maps.LatLng(latLng.lat, newLng);
+}
+
+declare global {
+    interface Window {
+      initMap: () => void;
+    }
+  }
+  window.initMap = initMap;
+/* [END maps_ui_kit_place_search_text] */
+export{};
diff --git a/dist/samples/ui-kit-place-search-text/app/package.json b/dist/samples/ui-kit-place-search-text/app/package.json
@@ -0,0 +1,15 @@
+{
+    "name": "@js-api-samples/ui-kit-place-search-text",
+    "version": "1.0.0",
+    "scripts": {
+      "build": "tsc && bash ../jsfiddle.sh ui-kit-place-search-text && bash ../app.sh ui-kit-place-search-text && bash ../docs.sh ui-kit-place-search-text && npm run build:vite --workspace=. && bash ../dist.sh ui-kit-place-search-text",
+      "test": "tsc && npm run build:vite --workspace=.",
+      "start": "tsc && vite build --base './' && vite",
+      "build:vite": "vite build --base './'",
+      "preview": "vite preview"
+    },
+    "dependencies": {
+
+    }
+  }
+
diff --git a/dist/samples/ui-kit-place-search-text/app/style.css b/dist/samples/ui-kit-place-search-text/app/style.css
@@ -0,0 +1,68 @@
+/*
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_ui_kit_place_search] */
+html,
+  body {
+      height: 100%;
+      margin: 0;
+  }
+
+  body {
+      display: flex;
+      flex-direction: column;
+      font-family: Arial, Helvetica, sans-serif;
+  }
+
+  h1 {
+      font-size: 16px;
+      text-align: center;
+  }
+
+  gmp-map {
+      box-sizing: border-box;
+      height: 500px;
+  }
+
+  .overlay {
+      position: relative;
+      top: 20px;
+      margin: 20px;
+      width: 400px;
+  }
+
+  .controls {
+      display: flex;
+      gap: 10px;
+      margin-bottom: 10px;
+      height: 32px;
+  }
+
+  .search-button {
+      background-color: #5491f5;
+      color: #fff;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+      width: 100px;
+      cursor: pointer;
+  }
+
+  .type-select {
+      border: 1px solid #ccc;
+      border-radius: 5px;
+      flex-grow: 1;
+      padding: 0 10px;
+  }
+
+  .list-container {
+      height: 400px;
+      overflow: auto;
+      border-radius: 10px;
+  }
+
+  gmp-place-list {
+      background-color: #fff;
+  }
+/* [END maps_ui_kit_place_search] */
diff --git a/dist/samples/ui-kit-place-search-text/app/tsconfig.json b/dist/samples/ui-kit-place-search-text/app/tsconfig.json
@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+      "module": "esnext",
+      "target": "esnext",
+      "strict": true,
+      "noImplicitAny": false,
+      "lib": [
+        "es2015",
+        "esnext",
+        "es6",
+        "dom",
+        "dom.iterable"
+      ],
+      "moduleResolution": "Node",
+      "jsx": "preserve"
+    }
+  }
diff --git a/dist/samples/ui-kit-place-search-text/dist/assets/index-BQOE2HdH.js b/dist/samples/ui-kit-place-search-text/dist/assets/index-BQOE2HdH.js
diff --git a/dist/samples/ui-kit-place-search-text/dist/assets/index-Dq92m9UV.css b/dist/samples/ui-kit-place-search-text/dist/assets/index-Dq92m9UV.css
diff --git a/dist/samples/ui-kit-place-search-text/dist/index.html b/dist/samples/ui-kit-place-search-text/dist/index.html
@@ -0,0 +1,32 @@
+<!--
+ @license
+ Copyright 2025 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!--[START maps_ui_kit_place_search_text] -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Place List Text Search with Google Maps</title>
+    <meta charset="utf-8">
+    <script type="module" crossorigin src="./assets/index-BQOE2HdH.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-Dq92m9UV.css">
+  </head>
+  <body>
+    <!--[START maps_ui_kit_place_search_text_map] -->
+    <gmp-map center="-37.813,144.963" zoom="10" map-id="DEMO_MAP_ID">
+      <div class="overlay" slot="control-inline-start-block-start">
+        <div class="list-container">
+          <gmp-place-list selectable></gmp-place-list>
+        </div>
+      </div>
+      <gmp-place-details size="large"></gmp-place-details>
+    </gmp-map>
+    <!--[END maps_ui_kit_place_search_text_map] -->
+    <script
+      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps&callback=initMap&v=alpha"
+      defer
+    ></script>
+  </body>
+</html>
+<!--[END maps_ui_kit_place_search_text] -->
diff --git a/dist/samples/ui-kit-place-search-text/docs/index.html b/dist/samples/ui-kit-place-search-text/docs/index.html
@@ -0,0 +1,32 @@
+<!--
+ @license
+ Copyright 2025 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!--[START maps_ui_kit_place_search_text] -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Place List Text Search with Google Maps</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <script type="module" src="./index.js"></script>
+  </head>
+  <body>
+    <!--[START maps_ui_kit_place_search_text_map] -->
+    <gmp-map center="-37.813,144.963" zoom="10" map-id="DEMO_MAP_ID">
+      <div class="overlay" slot="control-inline-start-block-start">
+        <div class="list-container">
+          <gmp-place-list selectable></gmp-place-list>
+        </div>
+      </div>
+      <gmp-place-details size="large"></gmp-place-details>
+    </gmp-map>
+    <!--[END maps_ui_kit_place_search_text_map] -->
+    <script
+      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps&callback=initMap&v=alpha"
+      defer
+    ></script>
+  </body>
+</html>
+<!--[END maps_ui_kit_place_search_text] -->