Skip to content

Commit 4f6632b

Browse files
ejhaseldenejhaselden
authored
Update Basic Autocomplete to use gmp-map (#701)
1 parent a3fd439 commit 4f6632b

File tree

3 files changed

+52
-47
lines changed

3 files changed

+52
-47
lines changed

‎samples/place-autocomplete-basic-map/index.html‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<!--
33
@license
44
Copyright 2025 Google LLC. All Rights Reserved.
@@ -11,22 +11,34 @@
1111

1212
<link rel="stylesheet" type="text/css" href="./style.css" />
1313
<script type="module" src="./index.js"></script>
14+
<!-- prettier-ignore -->
15+
<script>
16+
(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))})
17+
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});
18+
</script>
1419
</head>
1520
<body>
1621
<!-- [START maps_place_autocomplete_basic_map_add] -->
17-
<div id="map-container"></div>
18-
<gmp-basic-place-autocomplete
19-
slot="control-inline-start-block-start"
20-
></gmp-basic-place-autocomplete>
22+
<gmp-map zoom="12" center="37.4220656,-122.0840897" map-id="DEMO_MAP_ID">
23+
<gmp-basic-place-autocomplete
24+
slot="control-inline-start-block-start"></gmp-basic-place-autocomplete>
25+
</gmp-map>
2126
<!-- [END maps_place_autocomplete_basic_map_add] -->
22-
<gmp-place-details-compact orientation="horizontal">
27+
<!-- Use inline styles to configure the Place Details Compact element because
28+
it will be placed within the info window, and info window content is inside
29+
the shadow DOM when using <gmp-map> -->
30+
<gmp-place-details-compact
31+
orientation="horizontal"
32+
style="width: 400px;
33+
display: none;
34+
border: none;
35+
padding: 0;
36+
margin: 0;
37+
background-color: transparent;
38+
color-scheme: light;">
2339
<gmp-place-details-place-request></gmp-place-details-place-request>
2440
<gmp-place-standard-content></gmp-place-standard-content>
2541
</gmp-place-details-compact>
26-
27-
<!-- prettier-ignore -->
28-
<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))})
29-
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
3042
</body>
3143
</html>
3244
<!-- [END maps_place_autocomplete_basic_map] -->

‎samples/place-autocomplete-basic-map/index.ts‎

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*
1+
/*
22
* @license
33
* Copyright 2025 Google LLC. All Rights Reserved.
44
* SPDX-License-Identifier: Apache-2.0
@@ -7,55 +7,61 @@
77

88
const placeAutocompleteElement = document.querySelector(
99
'gmp-basic-place-autocomplete',
10-
) as any;
10+
) as google.maps.places.PlaceAutocompleteElement;
1111
const placeDetailsElement = document.querySelector(
1212
'gmp-place-details-compact',
1313
) as any;
1414
const placeDetailsParent = placeDetailsElement.parentElement as HTMLElement;
15-
const mapDiv = document.getElementById('map-container') as HTMLElement;
16-
const center: google.maps.LatLngLiteral = { lat: 40.749933, lng: -73.98633 }; // New York City
17-
15+
const gmpMapElement = document.querySelector(
16+
'gmp-map',
17+
) as google.maps.MapElement;
1818

1919
async function initMap(): Promise<void> {
2020
// Asynchronously load required libraries from the Google Maps JS API.
2121
await google.maps.importLibrary('places');
22-
const { AdvancedMarkerElement } = await google.maps.importLibrary('marker') as typeof google.maps.marker;
23-
const { Map, InfoWindow } = await google.maps.importLibrary('maps') as any;
22+
const {AdvancedMarkerElement} = (await google.maps.importLibrary(
23+
'marker',
24+
)) as google.maps.MarkerLibrary;
25+
const {InfoWindow} = (await google.maps.importLibrary(
26+
'maps',
27+
)) as google.maps.MapsLibrary;
28+
29+
// Get the initial center directly from the gmp-map element's property.
30+
const center = gmpMapElement.center;
2431

2532
// Set the initial location bias for the autocomplete element.
2633
placeAutocompleteElement.locationBias = center;
2734

28-
// Create the map object with specified options.
29-
const map: google.maps.Map = new Map(mapDiv, {
30-
zoom: 12,
31-
center: center,
32-
mapId: 'DEMO_MAP_ID',
35+
// Update the map object with specified options.
36+
const map = gmpMapElement.innerMap;
37+
map.setOptions({
3338
clickableIcons: false,
3439
mapTypeControl: false,
3540
streetViewControl: false,
3641
});
3742

3843
// Create an advanced marker to show the location of a selected place.
39-
const advancedMarkerElement: google.maps.marker.AdvancedMarkerElement = new AdvancedMarkerElement({
40-
map: map,
41-
});
44+
const advancedMarkerElement: google.maps.marker.AdvancedMarkerElement =
45+
new AdvancedMarkerElement({
46+
map: map,
47+
collisionBehavior:
48+
google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL,
49+
});
4250

4351
// Create an InfoWindow to hold the place details component.
4452
const infoWindow: google.maps.InfoWindow = new InfoWindow({
4553
minWidth: 360,
4654
disableAutoPan: true,
47-
closeButton: false,
4855
headerDisabled: true,
4956
pixelOffset: new google.maps.Size(0, -10),
5057
});
5158

52-
5359
// [START maps_place_autocomplete_basic_map_listener]
5460
// Event listener for when a place is selected from the autocomplete list.
5561
placeAutocompleteElement.addEventListener('gmp-select', (event: any) => {
56-
5762
// Reset marker and InfoWindow, and prepare the details element.
5863
placeDetailsParent.appendChild(placeDetailsElement);
64+
placeDetailsElement.style.display = 'block';
5965
advancedMarkerElement.position = null;
6066
infoWindow.close();
6167

@@ -70,7 +76,7 @@ async function initMap(): Promise<void> {
7076
// Event listener for when the place details have finished loading.
7177
placeDetailsElement.addEventListener('gmp-load', () => {
7278
const location = placeDetailsElement.place.location as google.maps.LatLng;
73-
79+
7480
// Position the marker and open the InfoWindow at the place's location.
7581
advancedMarkerElement.position = location;
7682
infoWindow.setContent(placeDetailsElement);
@@ -79,7 +85,6 @@ async function initMap(): Promise<void> {
7985
anchor: advancedMarkerElement,
8086
});
8187
map.setCenter(location);
82-
placeDetailsElement.focus();
8388
});
8489

8590
// Event listener to close the InfoWindow when the map is clicked.
@@ -91,7 +96,7 @@ async function initMap(): Promise<void> {
9196
// Event listener for when the map finishes moving (panning or zooming).
9297
map.addListener('idle', (): void => {
9398
const newCenter = map.getCenter() as google.maps.LatLng;
94-
99+
95100
// Update the autocomplete's location bias to a 10km radius around the new map center.
96101
placeAutocompleteElement.locationBias = new google.maps.Circle({
97102
center: {

‎samples/place-autocomplete-basic-map/style.css‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,38 +3,26 @@
33
* Copyright 2025 Google LLC. All Rights Reserved.
44
* SPDX-License-Identifier: Apache-2.0
55
*/
6-
/* [START maps_place_autocomplete_basic_map] */
6+
/* [START maps_place_autocomplete_basic_map] */
77
html,
88
body {
99
height: 100%;
1010
margin: 0;
1111
padding: 0;
1212
}
1313

14-
#map-container {
14+
gmp-map {
1515
height: 100%;
1616
}
1717

1818
gmp-basic-place-autocomplete {
1919
position: absolute;
20-
height: 50px;
20+
height: 30px;
2121
width: 500px;
2222
top: 10px;
2323
left: 10px;
24-
z-index: 1;
25-
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0. 2);
24+
box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.2);
2625
color-scheme: light;
2726
border-radius: 10px;
2827
}
29-
30-
gmp-place-details-compact {
31-
width: 360px;
32-
min-width: 300px;
33-
max-height: 300px;
34-
border: none;
35-
background-color: #ffffff;
36-
color-scheme: light;
37-
}
38-
39-
4028
/* [END maps_place_autocomplete_basic_map] */

0 commit comments

Comments
 (0)