googlemaps-samples · willum070 · Sep 5, 2025 · Aug 1, 2025 · Sep 3, 2025 · Sep 3, 2025
diff --git a/samples/place-nearby-search/index.html b/samples/place-nearby-search/index.html
@@ -13,8 +13,19 @@
     <script type="module" src="./index.js"></script>
   </head>
   <body>
-    <div id="map"></div>
-
+      <gmp-map center="45.438646,12.327573" zoom="14" map-id="DEMO_MAP_ID">
+        <gmp-advanced-marker></gmp-advanced-marker>
+        <div id="controls" slot="control-inline-start-block-start">
+        <select name="types" class="type-select">
+          <option value="" selected disabled>Select a place type</option>
+          <option value="cafe">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>
     <!-- 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>

diff --git a/samples/place-nearby-search/index.ts b/samples/place-nearby-search/index.ts
@@ -5,72 +5,112 @@
  */
 
 // [START maps_place_nearby_search]
+const mapElement = document.querySelector('gmp-map') as any;
 let map;
+const advancedMarkerElement = document.querySelector('gmp-advanced-marker') as any;
+let center;
+let typeSelect;
+let markers = {};
+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);
+    center = new LatLng(45.438646, 12.327573); // Venice, Italy
 
-    map = new Map(document.getElementById('map') as HTMLElement, {
-        center: center,
-        zoom: 11,
-        mapId: 'DEMO_MAP_ID',
+    map = await mapElement.innerMap;
+    map.setOptions ({
         mapTypeControl: false,
     });
-    nearbySearch();
+
+    typeSelect = document.querySelector(".type-select");
+
+    typeSelect.addEventListener('change', () => {
+        nearbySearch();
+    });
+
+    infoWindow = new InfoWindow();
 }
 
 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 = map.getCenter();
+    let bounds = map.getBounds();
+    let ne = bounds.getNorthEast();
+    let sw = bounds.getSouthWest();
+    let diameter = spherical.computeDistanceBetween(ne, sw);
+    let radius = Math.min((diameter / 2 ), 50000); // Radius cannot be more than 50000.
 
     const request = {
         // required parameters
-        fields: ['displayName', 'location', 'businessStatus'],
+        fields: ['displayName', 'location', 'formattedAddress', 'googleMapsLinks'],
         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 id in markers) {
+            markers[id].map = null;
+        };
+        markers = {};
+
         // Loop through and get all the results.
-        places.forEach((place) => {
-            const markerView = new AdvancedMarkerElement({
+        places.forEach(place => {
+            const marker = new AdvancedMarkerElement({
                 map,
                 position: place.location,
                 title: place.displayName,
             });
+            markers[place.id] = marker;
+
+           //@ts-expect-error
+           let content = `${place.formattedAddress}<br/>${place.id}<br/><a href="${place.googleMapsLinks.placeURI}">View Details on Google Maps</a>`;
 
-            bounds.extend(place.location as google.maps.LatLng);
-            console.log(place);
+            marker.addListener('gmp-click', () => {
+                map.panTo(place.location);
+                updateInfoWindow(place.displayName, content, marker);
+            });
+
+            if (place.location != null) {
+                bounds.extend(place.location);
+            }
         });
-    
+
         map.fitBounds(bounds);
 
     } else {
-        console.log("No results");
+        console.log('No results');
+    }
+
+    async function updateInfoWindow(title, content, anchor) {
+        infoWindow.setContent(content);
+        infoWindow.setHeaderContent(title);
+        infoWindow.open({
+            map,
+            anchor,
+            shouldFocus: false,
+        });
     }
 }
 

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] */