Update Basic Autocomplete to use gmp-map

ejhaselden · ejhaselden · commit 41346d0f84c5 · 2025-08-15T21:40:06.000Z
diff --git a/samples/place-autocomplete-basic-map/index.html b/samples/place-autocomplete-basic-map/index.html
@@ -11,22 +11,33 @@
 
     <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">
+    <gmp-place-details-compact
+      orientation="horizontal"
+      style="width: 400px;
+     display: none;
+     border: none;
+     padding: 0;
+     margin: 0;
+     background-color: #ffffff;
+     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/samples/place-autocomplete-basic-map/index.ts b/samples/place-autocomplete-basic-map/index.ts
@@ -12,50 +12,47 @@ 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 gmpMapElement = document.querySelector('gmp-map') as any;
 const center: google.maps.LatLngLiteral = { lat: 40.749933, lng: -73.98633 }; // New York City
 
-
 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;
 
   // 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',
-    clickableIcons: false,
-    mapTypeControl: false,
-    streetViewControl: false,
-  });
+    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,
+    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,6 +67,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;
@@ -79,7 +77,6 @@ async function initMap(): Promise<void> {
       anchor: advancedMarkerElement,
     });
     map.setCenter(location);
-    placeDetailsElement.focus();
   });
 
   // Event listener to close the InfoWindow when the map is clicked.
diff --git a/samples/place-autocomplete-basic-map/style.css b/samples/place-autocomplete-basic-map/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] */
