googlemaps-samples · willum070 · Aug 25, 2025 · Aug 25, 2025
diff --git a/dist/samples/place-autocomplete-basic-map/app/index.html b/dist/samples/place-autocomplete-basic-map/app/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <!--
  @license
  Copyright 2025 Google LLC. All Rights Reserved.
@@ -11,22 +11,34 @@
 
     <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: "weekly"});
+    </script>
   </head>
   <body>
     <!-- [START maps_place_autocomplete_basic_map_add] -->
-    <div id="map-container"></div>
-    <gmp-basic-place-autocomplete
-      slot="control-inline-start-block-start"
-    ></gmp-basic-place-autocomplete>
+    <gmp-map zoom="12" center="37.4220656,-122.0840897" map-id="DEMO_MAP_ID">
+      <gmp-basic-place-autocomplete
+        slot="control-inline-start-block-start"></gmp-basic-place-autocomplete>
+    </gmp-map>
     <!-- [END maps_place_autocomplete_basic_map_add] -->
-    <gmp-place-details-compact orientation="horizontal">
+    <!-- Use inline styles to configure the Place Details Compact element because
+     it will be placed within the info window, and info window content is inside 
+     the shadow DOM when using <gmp-map> -->
+    <gmp-place-details-compact
+      orientation="horizontal"
+      style="width: 400px;
+      display: none;
+      border: none;
+      padding: 0;
+      margin: 0;
+      background-color: transparent;
+      color-scheme: light;">
       <gmp-place-details-place-request></gmp-place-details-place-request>
       <gmp-place-standard-content></gmp-place-standard-content>
     </gmp-place-details-compact>
-
-    <!-- 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>
   </body>
 </html>
 <!-- [END maps_place_autocomplete_basic_map] -->
diff --git a/dist/samples/place-autocomplete-basic-map/app/index.ts b/dist/samples/place-autocomplete-basic-map/app/index.ts
@@ -1,4 +1,4 @@
- /*
+/*
  * @license
  * Copyright 2025 Google LLC. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
@@ -7,55 +7,61 @@
 
 const placeAutocompleteElement = document.querySelector(
   'gmp-basic-place-autocomplete',
-) as any;
+) as google.maps.places.PlaceAutocompleteElement;
 const placeDetailsElement = document.querySelector(
   'gmp-place-details-compact',
 ) as any;
 const placeDetailsParent = placeDetailsElement.parentElement as HTMLElement;
-const mapDiv = document.getElementById('map-container') as HTMLElement;
-const center: google.maps.LatLngLiteral = { lat: 40.749933, lng: -73.98633 }; // New York City
-
+const gmpMapElement = document.querySelector(
+  'gmp-map',
+) as google.maps.MapElement;
 
 async function initMap(): Promise<void> {
   // Asynchronously load required libraries from the Google Maps JS API.
   await google.maps.importLibrary('places');
-  const { AdvancedMarkerElement } = await google.maps.importLibrary('marker') as typeof google.maps.marker;
-  const { Map, InfoWindow } = await google.maps.importLibrary('maps') as any;
+  const {AdvancedMarkerElement} = (await google.maps.importLibrary(
+    'marker',
+  )) as google.maps.MarkerLibrary;
+  const {InfoWindow} = (await google.maps.importLibrary(
+    'maps',
+  )) as google.maps.MapsLibrary;
+
+  // Get the initial center directly from the gmp-map element's property.
+  const center = gmpMapElement.center;
 
   // Set the initial location bias for the autocomplete element.
   placeAutocompleteElement.locationBias = center;
 
-  // Create the map object with specified options.
-  const map: google.maps.Map = new Map(mapDiv, {
-    zoom: 12,
-    center: center,
-    mapId: 'DEMO_MAP_ID',
+  // Update the map object with specified options.
+  const map = gmpMapElement.innerMap;
+  map.setOptions({
     clickableIcons: false,
     mapTypeControl: false,
     streetViewControl: false,
   });
 
   // Create an advanced marker to show the location of a selected place.
-  const advancedMarkerElement: google.maps.marker.AdvancedMarkerElement = new AdvancedMarkerElement({
-    map: map,
-  });
+  const advancedMarkerElement: google.maps.marker.AdvancedMarkerElement =
+    new AdvancedMarkerElement({
+      map: map,
+      collisionBehavior:
+        google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL,
+    });
 
   // Create an InfoWindow to hold the place details component.
   const infoWindow: google.maps.InfoWindow = new InfoWindow({
     minWidth: 360,
     disableAutoPan: true,
-    closeButton: false,
     headerDisabled: true,
     pixelOffset: new google.maps.Size(0, -10),
   });
 
-
   // [START maps_place_autocomplete_basic_map_listener]
   // Event listener for when a place is selected from the autocomplete list.
   placeAutocompleteElement.addEventListener('gmp-select', (event: any) => {
-
     // Reset marker and InfoWindow, and prepare the details element.
     placeDetailsParent.appendChild(placeDetailsElement);
+    placeDetailsElement.style.display = 'block';
     advancedMarkerElement.position = null;
     infoWindow.close();
 
@@ -70,7 +76,7 @@ async function initMap(): Promise<void> {
   // Event listener for when the place details have finished loading.
   placeDetailsElement.addEventListener('gmp-load', () => {
     const location = placeDetailsElement.place.location as google.maps.LatLng;
-    
+
     // Position the marker and open the InfoWindow at the place's location.
     advancedMarkerElement.position = location;
     infoWindow.setContent(placeDetailsElement);
@@ -79,7 +85,6 @@ async function initMap(): Promise<void> {
       anchor: advancedMarkerElement,
     });
     map.setCenter(location);
-    placeDetailsElement.focus();
   });
 
   // Event listener to close the InfoWindow when the map is clicked.
@@ -91,14 +96,14 @@ async function initMap(): Promise<void> {
   // Event listener for when the map finishes moving (panning or zooming).
   map.addListener('idle', (): void => {
     const newCenter = map.getCenter() as google.maps.LatLng;
-    
+
     // Update the autocomplete's location bias to a 10km radius around the new map center.
     placeAutocompleteElement.locationBias = new google.maps.Circle({
       center: {
         lat: newCenter.lat(),
         lng: newCenter.lng(),
       },
-      radius: 10000, // 10km in meters
+      radius: 10000, // 10km in meters.
     });
   });
 }

diff --git a/dist/samples/place-autocomplete-basic-map/app/style.css b/dist/samples/place-autocomplete-basic-map/app/style.css
@@ -3,38 +3,26 @@
  * Copyright 2025 Google LLC. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
- /* [START maps_place_autocomplete_basic_map] */
+/* [START maps_place_autocomplete_basic_map] */
 html,
 body {
   height: 100%;
   margin: 0;
   padding: 0;
 }
 
-#map-container {
+gmp-map {
   height: 100%;
 }
 
 gmp-basic-place-autocomplete {
   position: absolute;
-  height: 50px;
+  height: 30px;
   width: 500px;
   top: 10px;
   left: 10px;
-  z-index: 1;
-  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0. 2);
+  box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.2);
   color-scheme: light;
   border-radius: 10px;
 }
-
-gmp-place-details-compact {
-  width: 360px;
-  min-width: 300px;
-  max-height: 300px;
-  border: none;
-  background-color: #ffffff;
-  color-scheme: light;
-}
-
-
 /* [END maps_place_autocomplete_basic_map] */
diff --git a/dist/samples/place-autocomplete-basic-map/dist/assets/index-D-6Qtdh_.css b/dist/samples/place-autocomplete-basic-map/dist/assets/index-D-6Qtdh_.css
diff --git a/dist/samples/place-autocomplete-basic-map/dist/assets/index-D16h0RvV.js b/dist/samples/place-autocomplete-basic-map/dist/assets/index-D16h0RvV.js
diff --git a/dist/samples/place-autocomplete-basic-map/dist/assets/index-DLx0Rasp.js b/dist/samples/place-autocomplete-basic-map/dist/assets/index-DLx0Rasp.js
diff --git a/dist/samples/place-autocomplete-basic-map/dist/assets/index-NYR7D18x.css b/dist/samples/place-autocomplete-basic-map/dist/assets/index-NYR7D18x.css
@@ -0,0 +1,5 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */html,body{height:100%;margin:0;padding:0}gmp-map{height:100%}gmp-basic-place-autocomplete{position:absolute;height:30px;width:500px;top:10px;left:10px;box-shadow:4px 4px 5px #0003;color-scheme:light;border-radius:10px}
diff --git a/dist/samples/place-autocomplete-basic-map/dist/index.html b/dist/samples/place-autocomplete-basic-map/dist/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <!--
  @license
  Copyright 2025 Google LLC. All Rights Reserved.
@@ -9,24 +9,36 @@
   <head>
     <title>Basic Place Autocomplete map</title>
 
-    <script type="module" crossorigin src="./assets/index-D16h0RvV.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-D-6Qtdh_.css">
+    <!-- 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-DLx0Rasp.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-NYR7D18x.css">
   </head>
   <body>
     <!-- [START maps_place_autocomplete_basic_map_add] -->
-    <div id="map-container"></div>
-    <gmp-basic-place-autocomplete
-      slot="control-inline-start-block-start"
-    ></gmp-basic-place-autocomplete>
+    <gmp-map zoom="12" center="37.4220656,-122.0840897" map-id="DEMO_MAP_ID">
+      <gmp-basic-place-autocomplete
+        slot="control-inline-start-block-start"></gmp-basic-place-autocomplete>
+    </gmp-map>
     <!-- [END maps_place_autocomplete_basic_map_add] -->
-    <gmp-place-details-compact orientation="horizontal">
+    <!-- Use inline styles to configure the Place Details Compact element because
+     it will be placed within the info window, and info window content is inside 
+     the shadow DOM when using <gmp-map> -->
+    <gmp-place-details-compact
+      orientation="horizontal"
+      style="width: 400px;
+      display: none;
+      border: none;
+      padding: 0;
+      margin: 0;
+      background-color: transparent;
+      color-scheme: light;">
       <gmp-place-details-place-request></gmp-place-details-place-request>
       <gmp-place-standard-content></gmp-place-standard-content>
     </gmp-place-details-compact>
-
-    <!-- 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>
   </body>
 </html>
 <!-- [END maps_place_autocomplete_basic_map] -->
diff --git a/dist/samples/place-autocomplete-basic-map/docs/index.html b/dist/samples/place-autocomplete-basic-map/docs/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <!--
  @license
  Copyright 2025 Google LLC. All Rights Reserved.
@@ -11,22 +11,34 @@
 
     <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: "weekly"});
+    </script>
   </head>
   <body>
     <!-- [START maps_place_autocomplete_basic_map_add] -->
-    <div id="map-container"></div>
-    <gmp-basic-place-autocomplete
-      slot="control-inline-start-block-start"
-    ></gmp-basic-place-autocomplete>
+    <gmp-map zoom="12" center="37.4220656,-122.0840897" map-id="DEMO_MAP_ID">
+      <gmp-basic-place-autocomplete
+        slot="control-inline-start-block-start"></gmp-basic-place-autocomplete>
+    </gmp-map>
     <!-- [END maps_place_autocomplete_basic_map_add] -->
-    <gmp-place-details-compact orientation="horizontal">
+    <!-- Use inline styles to configure the Place Details Compact element because
+     it will be placed within the info window, and info window content is inside 
+     the shadow DOM when using <gmp-map> -->
+    <gmp-place-details-compact
+      orientation="horizontal"
+      style="width: 400px;
+      display: none;
+      border: none;
+      padding: 0;
+      margin: 0;
+      background-color: transparent;
+      color-scheme: light;">
       <gmp-place-details-place-request></gmp-place-details-place-request>
       <gmp-place-standard-content></gmp-place-standard-content>
     </gmp-place-details-compact>
-
-    <!-- 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>
   </body>
 </html>
 <!-- [END maps_place_autocomplete_basic_map] -->