Skip to content

Commit 5ddff3a

Browse files
willum070willum070
authored
feat: Quality and standards update for place-autocomplete-map. (#883)
* feat: Quality and standards update for place-autocomplete-map. * Rename CSS selector from #map to .gmp-map * Fix unused variable, removed tsignore
1 parent 13cd5d6 commit 5ddff3a

File tree

3 files changed

+76
-70
lines changed

3 files changed

+76
-70
lines changed

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

Lines changed: 11 additions & 8 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,16 +11,19 @@
1111

1212
<link rel="stylesheet" type="text/css" href="./style.css" />
1313
<script type="module" src="./index.js"></script>
14-
</head>
15-
<body>
16-
<div class="place-autocomplete-card" id="place-autocomplete-card">
17-
<p>Search for a place here:</p>
18-
</div>
19-
<div id="map"></div>
20-
2114
<!-- prettier-ignore -->
2215
<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))})
2316
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
17+
</head>
18+
<body>
19+
<gmp-map center="40.749933,-73.98633" zoom="13" map-id="DEMO_MAP_ID">
20+
<div
21+
class="place-autocomplete-card"
22+
slot="control-inline-start-block-start">
23+
<p>Search for a place here:</p>
24+
<gmp-place-autocomplete></gmp-place-autocomplete>
25+
</div>
26+
</gmp-map>
2427
</body>
2528
</html>
2629
<!-- [END maps_place_autocomplete_map] -->

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

Lines changed: 62 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -5,80 +5,83 @@
55
*/
66

77
// [START maps_place_autocomplete_map]
8-
let map: google.maps.Map;
8+
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
9+
const placeAutocomplete = document.querySelector(
10+
'gmp-place-autocomplete'
11+
) as google.maps.places.PlaceAutocompleteElement;
12+
let innerMap;
913
let marker: google.maps.marker.AdvancedMarkerElement;
1014
let infoWindow: google.maps.InfoWindow;
1115
let center = { lat: 40.749933, lng: -73.98633 }; // New York City
1216
async function initMap(): Promise<void> {
13-
// Request needed libraries.
14-
//@ts-ignore
15-
const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
16-
google.maps.importLibrary("marker"),
17-
google.maps.importLibrary("places")
18-
]);
17+
// Request needed libraries.
18+
const [] = await Promise.all([
19+
google.maps.importLibrary('marker'),
20+
google.maps.importLibrary('places'),
21+
]);
1922

20-
// Initialize the map.
21-
map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
22-
center,
23-
zoom: 13,
24-
mapId: '4504f8b37365c3d0',
25-
mapTypeControl: false,
26-
});
27-
// [START maps_place_autocomplete_map_add]
28-
//@ts-ignore
29-
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
30-
//@ts-ignore
31-
placeAutocomplete.id = 'place-autocomplete-input';
32-
placeAutocomplete.locationBias = center;
23+
// [START maps_place_autocomplete_map_add]
24+
// Get the inner map.
25+
innerMap = mapElement.innerMap;
26+
innerMap.setOptions({
27+
mapTypeControl: false,
28+
});
3329

34-
const card = document.getElementById('place-autocomplete-card') as HTMLElement;
35-
//@ts-ignore
36-
card.appendChild(placeAutocomplete);
37-
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
38-
// [END maps_place_autocomplete_map_add]
30+
// Use the bounds_changed event to restrict results to the current map bounds.
31+
google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
32+
placeAutocomplete.locationRestriction = innerMap.getBounds();
33+
});
34+
// [END maps_place_autocomplete_map_add]
3935

40-
// Create the marker and infowindow.
41-
marker = new google.maps.marker.AdvancedMarkerElement({
42-
map,
43-
});
44-
45-
infoWindow = new google.maps.InfoWindow({});
36+
// Create the marker and infowindow.
37+
marker = new google.maps.marker.AdvancedMarkerElement({
38+
map: innerMap,
39+
});
4640

47-
// [START maps_place_autocomplete_map_listener]
48-
// Add the gmp-placeselect listener, and display the results on the map.
49-
//@ts-ignore
50-
placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
51-
const place = placePrediction.toPlace();
52-
await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
41+
infoWindow = new google.maps.InfoWindow({});
5342

54-
// If the place has a geometry, then present it on a map.
55-
if (place.viewport) {
56-
map.fitBounds(place.viewport);
57-
} else {
58-
map.setCenter(place.location);
59-
map.setZoom(17);
60-
}
43+
// [START maps_place_autocomplete_map_listener]
44+
// Add the gmp-placeselect listener, and display the results on the map.
45+
//@ts-ignore
46+
placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
47+
const place = placePrediction.toPlace();
48+
await place.fetchFields({
49+
fields: ['displayName', 'formattedAddress', 'location'],
50+
});
6151

62-
let content = '<div id="infowindow-content">' +
63-
'<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
64-
'<span id="place-address">' + place.formattedAddress + '</span>' +
65-
'</div>';
52+
// If the place has a geometry, then present it on a map.
53+
if (place.viewport) {
54+
innerMap.fitBounds(place.viewport);
55+
} else {
56+
innerMap.setCenter(place.location);
57+
innerMap.setZoom(17);
58+
}
6659

67-
updateInfoWindow(content, place.location);
68-
marker.position = place.location;
69-
});
70-
// [END maps_place_autocomplete_map_listener]
60+
let content = document.createElement('div');
61+
let nameText = document.createElement('span');
62+
nameText.textContent = place.displayName;
63+
content.appendChild(nameText);
64+
content.appendChild(document.createElement('br'));
65+
let addressText = document.createElement('span');
66+
addressText.textContent = place.formattedAddress;
67+
content.appendChild(addressText);
68+
69+
updateInfoWindow(content, place.location);
70+
marker.position = place.location;
71+
}
72+
);
73+
// [END maps_place_autocomplete_map_listener]
7174
}
7275

7376
// Helper function to create an info window.
7477
function updateInfoWindow(content, center) {
75-
infoWindow.setContent(content);
76-
infoWindow.setPosition(center);
77-
infoWindow.open({
78-
map,
79-
anchor: marker,
80-
shouldFocus: false,
81-
});
78+
infoWindow.setContent(content);
79+
infoWindow.setPosition(center);
80+
infoWindow.open({
81+
map: innerMap,
82+
anchor: marker,
83+
shouldFocus: false,
84+
});
8285
}
8386

8487
initMap();

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
* Always set the map height explicitly to define the size of the div element
99
* that contains the map.
1010
*/
11-
#map {
11+
gmp-map {
1212
height: 100%;
1313
}
1414

@@ -22,7 +22,7 @@ body {
2222
padding: 0;
2323
}
2424

25-
#place-autocomplete-card {
25+
.place-autocomplete-card {
2626
background-color: #fff;
2727
border-radius: 5px;
2828
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
@@ -45,4 +45,4 @@ gmp-place-autocomplete {
4545
display: inline;
4646
}
4747

48-
/* [END maps_place_autocomplete_map] */
48+
/* [END maps_place_autocomplete_map] */

0 commit comments

Comments
 (0)