googlemaps-samples · willum070 · Nov 5, 2025 · Nov 5, 2025
diff --git a/dist/samples/place-autocomplete-map/app/index.html b/dist/samples/place-autocomplete-map/app/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <!--
  @license
  Copyright 2025 Google LLC. All Rights Reserved.
@@ -11,16 +11,19 @@
 
     <link rel="stylesheet" type="text/css" href="./style.css" />
     <script type="module" src="./index.js"></script>
-  </head>
-  <body>
-    <div class="place-autocomplete-card" id="place-autocomplete-card">
-      <p>Search for a place here:</p>
-    </div>
-    <div id="map"></div>
-
     <!-- 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: "weekly"});</script>
+  </head>
+  <body>
+    <gmp-map center="40.749933,-73.98633" zoom="13" map-id="DEMO_MAP_ID">
+      <div
+        class="place-autocomplete-card"
+        slot="control-inline-start-block-start">
+        <p>Search for a place here:</p>
+        <gmp-place-autocomplete></gmp-place-autocomplete>
+      </div>
+    </gmp-map>
   </body>
 </html>
 <!-- [END maps_place_autocomplete_map] -->
diff --git a/dist/samples/place-autocomplete-map/app/index.ts b/dist/samples/place-autocomplete-map/app/index.ts
@@ -5,80 +5,83 @@
  */
 
 // [START maps_place_autocomplete_map]
-let map: google.maps.Map;
+const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
+const placeAutocomplete = document.querySelector(
+  'gmp-place-autocomplete'
+) as google.maps.places.PlaceAutocompleteElement;
+let innerMap;
 let marker: google.maps.marker.AdvancedMarkerElement;
 let infoWindow: google.maps.InfoWindow;
 let center = { lat: 40.749933, lng: -73.98633 }; // New York City
 async function initMap(): Promise<void> {
-    // Request needed libraries.
-    //@ts-ignore
-    const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
-        google.maps.importLibrary("marker"),
-        google.maps.importLibrary("places")
-      ]);
+  // Request needed libraries.
+  const [] = await Promise.all([
+    google.maps.importLibrary('marker'),
+    google.maps.importLibrary('places'),
+  ]);
 
-    // Initialize the map.
-    map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
-        center,
-        zoom: 13,
-        mapId: '4504f8b37365c3d0',
-        mapTypeControl: false,
-    });
-    // [START maps_place_autocomplete_map_add]
-    //@ts-ignore
-    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
-    //@ts-ignore
-    placeAutocomplete.id = 'place-autocomplete-input';
-    placeAutocomplete.locationBias = center;
+  // [START maps_place_autocomplete_map_add]
+  // Get the inner map.
+  innerMap = mapElement.innerMap;
+  innerMap.setOptions({
+    mapTypeControl: false,
+  });
 
-    const card = document.getElementById('place-autocomplete-card') as HTMLElement;
-    //@ts-ignore
-    card.appendChild(placeAutocomplete);
-    map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
-    // [END maps_place_autocomplete_map_add]
+  // Use the bounds_changed event to restrict results to the current map bounds.
+  google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
+    placeAutocomplete.locationRestriction = innerMap.getBounds();
+  });
+  // [END maps_place_autocomplete_map_add]
 
-    // Create the marker and infowindow.
-    marker = new google.maps.marker.AdvancedMarkerElement({
-        map,
-    });
-
-    infoWindow = new google.maps.InfoWindow({});
+  // Create the marker and infowindow.
+  marker = new google.maps.marker.AdvancedMarkerElement({
+    map: innerMap,
+  });
 
-    // [START maps_place_autocomplete_map_listener]
-    // Add the gmp-placeselect listener, and display the results on the map.
-    //@ts-ignore
-    placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
-        const place = placePrediction.toPlace();
-        await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
+  infoWindow = new google.maps.InfoWindow({});
 
-        // If the place has a geometry, then present it on a map.
-        if (place.viewport) {
-            map.fitBounds(place.viewport);
-        } else {
-            map.setCenter(place.location);
-            map.setZoom(17);
-        }
+  // [START maps_place_autocomplete_map_listener]
+  // Add the gmp-placeselect listener, and display the results on the map.
+  //@ts-ignore
+  placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
+      const place = placePrediction.toPlace();
+      await place.fetchFields({
+        fields: ['displayName', 'formattedAddress', 'location'],
+      });
 
-        let content = '<div id="infowindow-content">' +
-        '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
-        '<span id="place-address">' + place.formattedAddress + '</span>' +
-        '</div>';
+      // If the place has a geometry, then present it on a map.
+      if (place.viewport) {
+        innerMap.fitBounds(place.viewport);
+      } else {
+        innerMap.setCenter(place.location);
+        innerMap.setZoom(17);
+      }
 
-        updateInfoWindow(content, place.location);
-        marker.position = place.location;
-    });
-    // [END maps_place_autocomplete_map_listener]
+      let content = document.createElement('div');
+      let nameText = document.createElement('span');
+      nameText.textContent = place.displayName;
+      content.appendChild(nameText);
+      content.appendChild(document.createElement('br'));
+      let addressText = document.createElement('span');
+      addressText.textContent = place.formattedAddress;
+      content.appendChild(addressText);
+
+      updateInfoWindow(content, place.location);
+      marker.position = place.location;
+    }
+  );
+  // [END maps_place_autocomplete_map_listener]
 }
 
 // Helper function to create an info window.
 function updateInfoWindow(content, center) {
-    infoWindow.setContent(content);
-    infoWindow.setPosition(center);
-    infoWindow.open({
-        map,
-        anchor: marker,
-        shouldFocus: false,
-    });
+  infoWindow.setContent(content);
+  infoWindow.setPosition(center);
+  infoWindow.open({
+    map: innerMap,
+    anchor: marker,
+    shouldFocus: false,
+  });
 }
 
 initMap();

diff --git a/dist/samples/place-autocomplete-map/app/style.css b/dist/samples/place-autocomplete-map/app/style.css
@@ -8,7 +8,7 @@
  * Always set the map height explicitly to define the size of the div element
  * that contains the map. 
  */
-#map {
+gmp-map {
   height: 100%;
 }
 
@@ -22,7 +22,7 @@ body {
   padding: 0;
 }
 
-#place-autocomplete-card {
+.place-autocomplete-card {
   background-color: #fff;
   border-radius: 5px;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
@@ -45,4 +45,4 @@ gmp-place-autocomplete {
   display: inline;
 }
 
-/* [END maps_place_autocomplete_map] */
+/* [END maps_place_autocomplete_map] */
diff --git a/dist/samples/place-autocomplete-map/dist/assets/index-D1J6f0HW.js b/dist/samples/place-autocomplete-map/dist/assets/index-D1J6f0HW.js
diff --git a/dist/samples/place-autocomplete-map/dist/assets/index-Dyfv9Qce.css b/dist/samples/place-autocomplete-map/dist/assets/index-Dyfv9Qce.css
diff --git a/dist/samples/place-autocomplete-map/dist/assets/index-Q4WDJuNh.js b/dist/samples/place-autocomplete-map/dist/assets/index-Q4WDJuNh.js
diff --git a/dist/samples/place-autocomplete-map/dist/assets/index-UzDNua_n.css b/dist/samples/place-autocomplete-map/dist/assets/index-UzDNua_n.css
@@ -0,0 +1,5 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */gmp-map{height:100%}html,body{height:100%;margin:0;padding:0}.place-autocomplete-card{background-color:#fff;border-radius:5px;box-shadow:#00000059 0 5px 15px;margin:10px;padding:5px;font-family:Roboto,sans-serif;font-size:large;font-weight:700}gmp-place-autocomplete{width:300px}#infowindow-content .title{font-weight:700}#map #infowindow-content{display:inline}
diff --git a/dist/samples/place-autocomplete-map/dist/index.html b/dist/samples/place-autocomplete-map/dist/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <!--
  @license
  Copyright 2025 Google LLC. All Rights Reserved.
@@ -9,18 +9,21 @@
   <head>
     <title>Place Autocomplete map</title>
 
-    <script type="module" crossorigin src="./assets/index-Q4WDJuNh.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-Dyfv9Qce.css">
-  </head>
-  <body>
-    <div class="place-autocomplete-card" id="place-autocomplete-card">
-      <p>Search for a place here:</p>
-    </div>
-    <div id="map"></div>
-
     <!-- 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: "weekly"});</script>
+    <script type="module" crossorigin src="./assets/index-D1J6f0HW.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-UzDNua_n.css">
+  </head>
+  <body>
+    <gmp-map center="40.749933,-73.98633" zoom="13" map-id="DEMO_MAP_ID">
+      <div
+        class="place-autocomplete-card"
+        slot="control-inline-start-block-start">
+        <p>Search for a place here:</p>
+        <gmp-place-autocomplete></gmp-place-autocomplete>
+      </div>
+    </gmp-map>
   </body>
 </html>
 <!-- [END maps_place_autocomplete_map] -->
diff --git a/dist/samples/place-autocomplete-map/docs/index.html b/dist/samples/place-autocomplete-map/docs/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <!--
  @license
  Copyright 2025 Google LLC. All Rights Reserved.
@@ -11,16 +11,19 @@
 
     <link rel="stylesheet" type="text/css" href="./style.css" />
     <script type="module" src="./index.js"></script>
-  </head>
-  <body>
-    <div class="place-autocomplete-card" id="place-autocomplete-card">
-      <p>Search for a place here:</p>
-    </div>
-    <div id="map"></div>
-
     <!-- 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: "weekly"});</script>
+  </head>
+  <body>
+    <gmp-map center="40.749933,-73.98633" zoom="13" map-id="DEMO_MAP_ID">
+      <div
+        class="place-autocomplete-card"
+        slot="control-inline-start-block-start">
+        <p>Search for a place here:</p>
+        <gmp-place-autocomplete></gmp-place-autocomplete>
+      </div>
+    </gmp-map>
   </body>
 </html>
 <!-- [END maps_place_autocomplete_map] -->
diff --git a/dist/samples/place-autocomplete-map/docs/index.js b/dist/samples/place-autocomplete-map/docs/index.js
@@ -5,58 +5,58 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 // [START maps_place_autocomplete_map]
-let map;
+const mapElement = document.querySelector('gmp-map');
+const placeAutocomplete = document.querySelector('gmp-place-autocomplete');
+let innerMap;
 let marker;
 let infoWindow;
 let center = { lat: 40.749933, lng: -73.98633 }; // New York City
 async function initMap() {
     // Request needed libraries.
-    //@ts-ignore
-    const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
-        google.maps.importLibrary("marker"),
-        google.maps.importLibrary("places")
+    const [] = await Promise.all([
+        google.maps.importLibrary('marker'),
+        google.maps.importLibrary('places'),
     ]);
-    // Initialize the map.
-    map = new google.maps.Map(document.getElementById('map'), {
-        center,
-        zoom: 13,
-        mapId: '4504f8b37365c3d0',
+    // [START maps_place_autocomplete_map_add]
+    // Get the inner map.
+    innerMap = mapElement.innerMap;
+    innerMap.setOptions({
         mapTypeControl: false,
     });
-    // [START maps_place_autocomplete_map_add]
-    //@ts-ignore
-    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
-    //@ts-ignore
-    placeAutocomplete.id = 'place-autocomplete-input';
-    placeAutocomplete.locationBias = center;
-    const card = document.getElementById('place-autocomplete-card');
-    //@ts-ignore
-    card.appendChild(placeAutocomplete);
-    map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
+    // Use the bounds_changed event to restrict results to the current map bounds.
+    google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
+        placeAutocomplete.locationRestriction = innerMap.getBounds();
+    });
     // [END maps_place_autocomplete_map_add]
     // Create the marker and infowindow.
     marker = new google.maps.marker.AdvancedMarkerElement({
-        map,
+        map: innerMap,
     });
     infoWindow = new google.maps.InfoWindow({});
     // [START maps_place_autocomplete_map_listener]
     // Add the gmp-placeselect listener, and display the results on the map.
     //@ts-ignore
     placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
         const place = placePrediction.toPlace();
-        await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
+        await place.fetchFields({
+            fields: ['displayName', 'formattedAddress', 'location'],
+        });
         // If the place has a geometry, then present it on a map.
         if (place.viewport) {
-            map.fitBounds(place.viewport);
+            innerMap.fitBounds(place.viewport);
         }
         else {
-            map.setCenter(place.location);
-            map.setZoom(17);
+            innerMap.setCenter(place.location);
+            innerMap.setZoom(17);
         }
-        let content = '<div id="infowindow-content">' +
-            '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
-            '<span id="place-address">' + place.formattedAddress + '</span>' +
-            '</div>';
+        let content = document.createElement('div');
+        let nameText = document.createElement('span');
+        nameText.textContent = place.displayName;
+        content.appendChild(nameText);
+        content.appendChild(document.createElement('br'));
+        let addressText = document.createElement('span');
+        addressText.textContent = place.formattedAddress;
+        content.appendChild(addressText);
         updateInfoWindow(content, place.location);
         marker.position = place.location;
     });
@@ -67,7 +67,7 @@ function updateInfoWindow(content, center) {
     infoWindow.setContent(content);
     infoWindow.setPosition(center);
     infoWindow.open({
-        map,
+        map: innerMap,
         anchor: marker,
         shouldFocus: false,
     });