feat: Adds interactivity to Nearby Search demo. (#677)

willum070 · web-flow · commit 89fd6e50ff54 · 2025-09-05T09:23:28.000-07:00
* feat: Adds interactivity to Nearby Search demo.

* Incorporates review comments.

* Adds fixes for HTML slotting

* Update CSS for map and container layout

* Incorporate review comments

* Moves script tag to HEAD.
* Makes cafe default option.
* Adjusts indentation issues.

* Incorporates review comments

* Change updateInfoWindow to a non-async function

* Refactor nearby search code for improved readability

* Refactor map variable to innerMap for clarity

* Remove extra line in nearby search sample
diff --git a/samples/place-nearby-search/index.html b/samples/place-nearby-search/index.html
@@ -6,18 +6,31 @@
 -->
 <!-- [START maps_place_nearby_search] -->
 <html>
-  <head>
-    <title>Nearby Search</title>
 
-    <link rel="stylesheet" type="text/css" href="./style.css" />
-    <script type="module" src="./index.js"></script>
-  </head>
-  <body>
-    <div id="map"></div>
+<head>
+  <title>Nearby Search</title>
+
+  <link rel="stylesheet" type="text/css" href="./style.css" />
+  <script type="module" src="./index.js"></script>
+  <!-- prettier-ignore -->
+  <script>(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })
+      ({ key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta" });</script>
+</head>
+
+<body>
+  <gmp-map center="45.438646,12.327573" zoom="14" map-id="DEMO_MAP_ID"><!-- Map id is required for Advanced Markers. -->
+    <gmp-advanced-marker></gmp-advanced-marker>
+    <div id="controls" slot="control-inline-start-block-start">
+      <select name="types" class="type-select">
+        <option value="cafe" selected>Cafe</option>
+        <option value="restaurant">Restaurant</option>
+        <option value="museum">Museum</option>
+        <option value="monument">Monument</option>
+        <option value="park">Park</option>
+      </select>
+    </div>
+  </gmp-map>
+</body>
 
-    <!-- prettier-ignore -->
-    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
-        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta"});</script>
-  </body>
 </html>
 <!-- [END maps_place_nearby_search] -->
diff --git a/samples/place-nearby-search/index.ts b/samples/place-nearby-search/index.ts
@@ -5,74 +5,117 @@
  */
 
 // [START maps_place_nearby_search]
-let map;
+const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
+let innerMap;
+const advancedMarkerElement = document.querySelector('gmp-advanced-marker') as google.maps.marker.AdvancedMarkerElement;
+let center;
+let typeSelect;
+let infoWindow;
 
 async function initMap() {
     const { Map, InfoWindow } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary;
+    const { LatLng } = await google.maps.importLibrary("core") as google.maps.CoreLibrary;
 
-    let center = new google.maps.LatLng(52.369358, 4.889258);
-
-    map = new Map(document.getElementById('map') as HTMLElement, {
-        center: center,
-        zoom: 11,
-        mapId: 'DEMO_MAP_ID',
+    innerMap = mapElement.innerMap;
+    innerMap.setOptions({
         mapTypeControl: false,
     });
+
+    typeSelect = document.querySelector(".type-select");
+
+    typeSelect.addEventListener('change', () => {
+        nearbySearch();
+    });
+
+    infoWindow = new InfoWindow();
+
+    // Kick off an initial search.
     nearbySearch();
 }
 
 async function nearbySearch() {
-    //@ts-ignore
     const { Place, SearchNearbyRankPreference } = await google.maps.importLibrary('places') as google.maps.PlacesLibrary;
     const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
+    const { spherical } = await google.maps.importLibrary('geometry') as google.maps.GeometryLibrary;
     // [START maps_place_nearby_search_request]
-
-    // Restrict within the map viewport.
-    let center = new google.maps.LatLng(52.369358, 4.889258);
+    // Get bounds and radius to constrain search.
+    center = mapElement.center;
+    let bounds = innerMap.getBounds();
+    const ne = bounds.getNorthEast();
+    const sw = bounds.getSouthWest();
+    const diameter = spherical.computeDistanceBetween(ne, sw);
+    const radius = Math.min((diameter / 2), 50000); // Radius cannot be more than 50000.
 
     const request = {
         // required parameters
-        fields: ['displayName', 'location', 'businessStatus'],
+        fields: ['displayName', 'location', 'formattedAddress', 'googleMapsURI'],
         locationRestriction: {
-            center: center,
-            radius: 500, 
+            center,
+            radius,
         },
         // optional parameters
-        includedPrimaryTypes: ['restaurant'],
+        includedPrimaryTypes: [typeSelect.value],
         maxResultCount: 5,
         rankPreference: SearchNearbyRankPreference.POPULARITY,
-        language: 'en-US',
-        region: 'us',
     };
 
-    //@ts-ignore
     const { places } = await Place.searchNearby(request);
     // [END maps_place_nearby_search_request]
 
     if (places.length) {
-        console.log(places);
-
         const { LatLngBounds } = await google.maps.importLibrary("core") as google.maps.CoreLibrary;
         const bounds = new LatLngBounds();
 
+        // First remove all existing markers.
+        for (const marker of mapElement.querySelectorAll('gmp-advanced-marker')) marker.remove();
+
         // Loop through and get all the results.
-        places.forEach((place) => {
-            const markerView = new AdvancedMarkerElement({
-                map,
+        places.forEach(place => {
+            if (!place.location) return;
+            bounds.extend(place.location);
+
+            const marker = new AdvancedMarkerElement({
+                map: innerMap,
                 position: place.location,
                 title: place.displayName,
             });
 
-            bounds.extend(place.location as google.maps.LatLng);
-            console.log(place);
+            // Build the content of the InfoWindow safely using DOM elements.
+            const content = document.createElement('div');
+            const address = document.createElement('div');
+            address.textContent = place.formattedAddress || '';
+            const placeId = document.createElement('div');
+            placeId.textContent = place.id;
+            content.append(address, placeId);
+
+            if (place.googleMapsURI) {
+                const link = document.createElement('a');
+                link.href = place.googleMapsURI;
+                link.target = '_blank';
+                link.textContent = 'View Details on Google Maps';
+                content.appendChild(link);
+            }
+
+            marker.addListener('gmp-click', () => {
+                innerMap.panTo(place.location);
+                updateInfoWindow(place.displayName, content, marker);
+            });
         });
-    
-        map.fitBounds(bounds);
+
+        innerMap.fitBounds(bounds, 100);
 
     } else {
-        console.log("No results");
+        console.log('No results');
     }
 }
 
+function updateInfoWindow(title, content, anchor) {
+    infoWindow.setContent(content);
+    infoWindow.setHeaderContent(title);
+    infoWindow.open({
+        anchor,
+    });
+}
+
 initMap();
 // [END maps_place_nearby_search]
diff --git a/samples/place-nearby-search/style.css b/samples/place-nearby-search/style.css
@@ -8,7 +8,13 @@
  * Always set the map height explicitly to define the size of the div element
  * that contains the map. 
  */
-#map {
+gmp-map {
+  height: 100%;
+}
+
+#map-container {
+  display: flex;
+  flex-direction: row;
   height: 100%;
 }
 
@@ -22,4 +28,15 @@ body {
   padding: 0;
 }
 
-/* [END maps_place_nearby_search] */
+.type-select {
+    width: 400px;
+    height: 32px;
+    border: 1px solid #000;
+    border-radius: 10px;
+    flex-grow: 1;
+    padding: 0 10px;
+    margin-left: 10px;
+    margin-top: 10px;
+  }
+
+/* [END maps_place_nearby_search] */
