Skip to content

Commit 5d96c14

Browse files
ejhaseldenejhaselden
committed
Update Basic Autocomplete to use gmp-map
1 parent e13a10a commit 5d96c14

File tree

3 files changed

+46
-45
lines changed

3 files changed

+46
-45
lines changed

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

Lines changed: 19 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,31 @@
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+
<gmp-place-details-compact
28+
orientation="horizontal"
29+
style="width: 400px;
30+
display: none;
31+
border: none;
32+
padding: 0;
33+
margin: 0;
34+
background-color: #ffffff;
35+
color-scheme: light;">
2336
<gmp-place-details-place-request></gmp-place-details-place-request>
2437
<gmp-place-standard-content></gmp-place-standard-content>
2538
</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>
3039
</body>
3140
</html>
3241
<!-- [END maps_place_autocomplete_basic_map] -->

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

Lines changed: 23 additions & 19 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
@@ -12,50 +12,54 @@ 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('gmp-map') as any;
1816

1917
async function initMap(): Promise<void> {
2018
// Asynchronously load required libraries from the Google Maps JS API.
2119
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;
20+
const {AdvancedMarkerElement} = (await google.maps.importLibrary(
21+
'marker',
22+
)) as google.maps.MarkerLibrary;
23+
const {InfoWindow} = (await google.maps.importLibrary(
24+
'maps',
25+
)) as google.maps.MapsLibrary;
26+
27+
// Get the initial center directly from the gmp-map element's property.
28+
const center = gmpMapElement.center;
2429

2530
// Set the initial location bias for the autocomplete element.
2631
placeAutocompleteElement.locationBias = center;
2732

2833
// 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',
34+
const map = gmpMapElement.innerMap;
35+
map.setOptions({
3336
clickableIcons: false,
3437
mapTypeControl: false,
3538
streetViewControl: false,
3639
});
3740

3841
// 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-
});
42+
const advancedMarkerElement: google.maps.marker.AdvancedMarkerElement =
43+
new AdvancedMarkerElement({
44+
map: map,
45+
collisionBehavior:
46+
google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL,
47+
});
4248

4349
// Create an InfoWindow to hold the place details component.
4450
const infoWindow: google.maps.InfoWindow = new InfoWindow({
4551
minWidth: 360,
4652
disableAutoPan: true,
47-
closeButton: false,
4853
headerDisabled: true,
4954
pixelOffset: new google.maps.Size(0, -10),
5055
});
5156

52-
5357
// [START maps_place_autocomplete_basic_map_listener]
5458
// Event listener for when a place is selected from the autocomplete list.
5559
placeAutocompleteElement.addEventListener('gmp-select', (event: any) => {
56-
5760
// Reset marker and InfoWindow, and prepare the details element.
5861
placeDetailsParent.appendChild(placeDetailsElement);
62+
placeDetailsElement.style.display = 'block';
5963
advancedMarkerElement.position = null;
6064
infoWindow.close();
6165

@@ -70,7 +74,7 @@ async function initMap(): Promise<void> {
7074
// Event listener for when the place details have finished loading.
7175
placeDetailsElement.addEventListener('gmp-load', () => {
7276
const location = placeDetailsElement.place.location as google.maps.LatLng;
73-
77+
7478
// Position the marker and open the InfoWindow at the place's location.
7579
advancedMarkerElement.position = location;
7680
infoWindow.setContent(placeDetailsElement);
@@ -79,7 +83,6 @@ async function initMap(): Promise<void> {
7983
anchor: advancedMarkerElement,
8084
});
8185
map.setCenter(location);
82-
placeDetailsElement.focus();
8386
});
8487

8588
// Event listener to close the InfoWindow when the map is clicked.
@@ -91,7 +94,7 @@ async function initMap(): Promise<void> {
9194
// Event listener for when the map finishes moving (panning or zooming).
9295
map.addListener('idle', (): void => {
9396
const newCenter = map.getCenter() as google.maps.LatLng;
94-
97+
9598
// Update the autocomplete's location bias to a 10km radius around the new map center.
9699
placeAutocompleteElement.locationBias = new google.maps.Circle({
97100
center: {
@@ -105,3 +108,4 @@ async function initMap(): Promise<void> {
105108

106109
initMap();
107110
// [END maps_place_autocomplete_basic_map]
111+

‎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)