Skip to content

Commit 1a079d9

Browse files
ejhaseldenwillum070
ejhaselden
and
willum070
authored
Now with infowindow (#680)
Co-authored-by: William French <[email protected]>
1 parent 8310605 commit 1a079d9

File tree

3 files changed

+99
-78
lines changed

3 files changed

+99
-78
lines changed

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

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,20 @@
77
<!-- [START maps_place_autocomplete_basic_map] -->
88
<html>
99
<head>
10-
<title>Place Autocomplete map</title>
10+
<title>Basic Place Autocomplete map</title>
1111

1212
<link rel="stylesheet" type="text/css" href="./style.css" />
1313
<script type="module" src="./index.js"></script>
1414
</head>
1515
<body>
16-
<div id="map-container">
17-
<gmp-basic-place-autocomplete></gmp-basic-place-autocomplete>
18-
<gmp-place-details-compact orientation="horizontal">
19-
<gmp-place-details-place-request></gmp-place-details-place-request>
20-
<gmp-place-all-content></gmp-place-all-content>
21-
</gmp-place-details-compact>
22-
<gmp-map zoom="14" map-id="DEMO_MAP_ID">
23-
<gmp-advanced-marker></gmp-advanced-marker>
24-
</gmp-map>
25-
</div>
16+
<div id="map-container"></div>
17+
<gmp-basic-place-autocomplete
18+
slot="control-inline-start-block-start"
19+
></gmp-basic-place-autocomplete>
20+
<gmp-place-details-compact orientation="horizontal">
21+
<gmp-place-details-place-request></gmp-place-details-place-request>
22+
<gmp-place-standard-content></gmp-place-standard-content>
23+
</gmp-place-details-compact>
2624

2725
<!-- prettier-ignore -->
2826
<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))})

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

Lines changed: 84 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,107 @@
1-
/*
1+
/*
22
* @license
33
* Copyright 2025 Google LLC. All Rights Reserved.
44
* SPDX-License-Identifier: Apache-2.0
55
*/
6+
// [START maps_place_autocomplete_basic_map]
67

8+
const placeAutocompleteElement = document.querySelector(
9+
'gmp-basic-place-autocomplete',
10+
) as any;
11+
const placeDetailsElement = document.querySelector(
12+
'gmp-place-details-compact',
13+
) as any;
14+
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
717

8-
// [START maps_place_autocomplete_basic_map]
9-
const mapContainer = document.getElementById("map-container") as any;
10-
const autocompleteElement = document.querySelector('gmp-basic-place-autocomplete') as any;
11-
const detailsElement = document.querySelector('gmp-place-details-compact') as any;
12-
const mapElement = document.querySelector('gmp-map') as any;
13-
const advancedMarkerElement = document.querySelector('gmp-advanced-marker') as any;
1418

15-
let center = { lat: 40.749933, lng: -73.98633 }; // New York City
19+
async function initMap(): Promise<void> {
20+
// Asynchronously load required libraries from the Google Maps JS API.
21+
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;
24+
25+
// Set the initial location bias for the autocomplete element.
26+
placeAutocompleteElement.locationBias = center;
1627

17-
async function initMap(): Promise<void>{
18-
//@ts-ignore
19-
const {BasicPlaceAutocompleteElement, PlaceDetailsElement} = await google.maps.importLibrary('places');
20-
//@ts-ignore
21-
const {AdvancedMarkerElement} = await google.maps.importLibrary('marker');
22-
//@ts-ignore
23-
const {LatLngBounds} = await google.maps.importLibrary('core');
24-
25-
// Set the initial map location and autocomplete location bias
26-
mapElement.center = center
27-
autocompleteElement.locationBias = center;
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',
33+
clickableIcons: false,
34+
mapTypeControl: false,
35+
streetViewControl: false,
36+
});
2837

29-
// Get the underlying google.maps.Map object to add listeners
30-
const map = mapElement.innerMap;
38+
// 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+
});
3142

32-
// Add the listener tochange locationBias to locationRestriction when the map moves
33-
map.addListener('bounds_changed', () => {
34-
autocompleteElement.locationBias = null;
35-
autocompleteElement.locationRestriction = map.getBounds();
36-
console.log("bias changed to restriction")
43+
// Create an InfoWindow to hold the place details component.
44+
const infoWindow: google.maps.InfoWindow = new InfoWindow({
45+
minWidth: 360,
46+
disableAutoPan: true,
47+
closeButton: false,
48+
headerDisabled: true,
49+
pixelOffset: new google.maps.Size(0, -10),
3750
});
3851

52+
3953
// [START maps_place_autocomplete_basic_map_listener]
40-
// Add the listener to update the Place Request element when the user selects a prediction
41-
autocompleteElement.addEventListener('gmp-select', async (event) => {
42-
const placeDetailsRequest = document.querySelector('gmp-place-details-place-request') as any;
54+
// Event listener for when a place is selected from the autocomplete list.
55+
placeAutocompleteElement.addEventListener('gmp-select', (event: any) => {
56+
57+
// Reset marker and InfoWindow, and prepare the details element.
58+
placeDetailsParent.appendChild(placeDetailsElement);
59+
advancedMarkerElement.position = null;
60+
infoWindow.close();
61+
62+
// Request details for the selected place.
63+
const placeDetailsRequest = placeDetailsElement.querySelector(
64+
'gmp-place-details-place-request',
65+
) as any;
4366
placeDetailsRequest.place = event.place.id;
4467
});
4568
// [END maps_place_autocomplete_basic_map_listener]
4669

47-
// Add the listener to update the marker when the Details element loads
48-
detailsElement.addEventListener('gmp-load', async () => {
49-
const location = detailsElement.place.location;
50-
detailsElement.style.display = "block"
70+
// Event listener for when the place details have finished loading.
71+
placeDetailsElement.addEventListener('gmp-load', () => {
72+
const location = placeDetailsElement.place.location as google.maps.LatLng;
73+
74+
// Position the marker and open the InfoWindow at the place's location.
5175
advancedMarkerElement.position = location;
52-
advancedMarkerElement.content = detailsElement;
53-
if (detailsElement.place.viewport) {
54-
map.fitBounds(detailsElement.place.viewport);
55-
} else {
56-
map.setCenter(location);
57-
map.setZoom(17);
58-
}
76+
infoWindow.setContent(placeDetailsElement);
77+
infoWindow.open({
78+
map,
79+
anchor: advancedMarkerElement,
80+
});
81+
map.setCenter(location);
82+
placeDetailsElement.focus();
83+
});
84+
85+
// Event listener to close the InfoWindow when the map is clicked.
86+
map.addListener('click', (): void => {
87+
infoWindow.close();
88+
advancedMarkerElement.position = null;
89+
});
90+
91+
// Event listener for when the map finishes moving (panning or zooming).
92+
map.addListener('idle', (): void => {
93+
const newCenter = map.getCenter() as google.maps.LatLng;
94+
95+
// Update the autocomplete's location bias to a 10km radius around the new map center.
96+
placeAutocompleteElement.locationBias = new google.maps.Circle({
97+
center: {
98+
lat: newCenter.lat(),
99+
lng: newCenter.lng(),
100+
},
101+
radius: 10000, // 10km in meters
102+
});
59103
});
60104
}
61105

62106
initMap();
63107
// [END maps_place_autocomplete_basic_map]
64-

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

Lines changed: 6 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
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%;
@@ -12,49 +12,29 @@ body {
1212
}
1313

1414
#map-container {
15-
display: flex;
16-
flex-direction: row;
17-
height: 100%;
18-
}
19-
20-
#gmp-map {
2115
height: 100%;
2216
}
2317

2418
gmp-basic-place-autocomplete {
2519
position: absolute;
2620
height: 50px;
21+
width: 500px;
2722
top: 10px;
2823
left: 10px;
2924
z-index: 1;
30-
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2);
25+
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0. 2);
3126
color-scheme: light;
3227
border-radius: 10px;
3328
}
3429

3530
gmp-place-details-compact {
3631
width: 360px;
32+
min-width: 300px;
3733
max-height: 300px;
3834
border: none;
39-
padding: 0;
40-
margin: 0;
41-
position: absolute;
42-
transform: translate(calc(-180px), calc(-215px));
43-
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2);
35+
background-color: #ffffff;
4436
color-scheme: light;
4537
}
4638

47-
/* This creates the pointer attached to the bottom of the element. */
48-
gmp-place-details-compact::after {
49-
content: "";
50-
position: absolute;
51-
top: 100%;
52-
left: 50%;
53-
transform: translateX(-50%);
54-
width: 0;
55-
height: 0;
56-
border-left: 16px solid transparent;
57-
border-right: 16px solid transparent;
58-
border-top: 20px solid var(--gmp-mat-color-surface, light-dark(white, black));
59-
}
39+
6040
/* [END maps_place_autocomplete_basic_map] */

0 commit comments

Comments
 (0)