Skip to content

Commit 59b0f86

Browse files
googlemaps-botgooglemaps-bot
authored
Update dist folder [skip ci] (#908)
1 parent 5ddff3a commit 59b0f86

File tree

15 files changed

+249
-230
lines changed

15 files changed

+249
-230
lines changed

‎dist/samples/place-autocomplete-map/app/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] -->

‎dist/samples/place-autocomplete-map/app/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();

‎dist/samples/place-autocomplete-map/app/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] */

‎dist/samples/place-autocomplete-map/dist/assets/index-D1J6f0HW.js‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/samples/place-autocomplete-map/dist/assets/index-Dyfv9Qce.css‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎dist/samples/place-autocomplete-map/dist/assets/index-Q4WDJuNh.js‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎dist/samples/place-autocomplete-map/dist/assets/index-UzDNua_n.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/**
2+
* @license
3+
* Copyright 2025 Google LLC. All Rights Reserved.
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/gmp-map{height:100%}html,body{height:100%;margin:0;padding:0}.place-autocomplete-card{background-color:#fff;border-radius:5px;box-shadow:#00000059 0 5px 15px;margin:10px;padding:5px;font-family:Roboto,sans-serif;font-size:large;font-weight:700}gmp-place-autocomplete{width:300px}#infowindow-content .title{font-weight:700}#map #infowindow-content{display:inline}

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

Lines changed: 13 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.
@@ -9,18 +9,21 @@
99
<head>
1010
<title>Place Autocomplete map</title>
1111

12-
<script type="module" crossorigin src="./assets/index-Q4WDJuNh.js"></script>
13-
<link rel="stylesheet" crossorigin href="./assets/index-Dyfv9Qce.css">
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-
2112
<!-- prettier-ignore -->
2213
<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))})
2314
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
15+
<script type="module" crossorigin src="./assets/index-D1J6f0HW.js"></script>
16+
<link rel="stylesheet" crossorigin href="./assets/index-UzDNua_n.css">
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] -->

‎dist/samples/place-autocomplete-map/docs/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] -->

‎dist/samples/place-autocomplete-map/docs/index.js‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,58 +5,58 @@
55
* SPDX-License-Identifier: Apache-2.0
66
*/
77
// [START maps_place_autocomplete_map]
8-
let map;
8+
const mapElement = document.querySelector('gmp-map');
9+
const placeAutocomplete = document.querySelector('gmp-place-autocomplete');
10+
let innerMap;
911
let marker;
1012
let infoWindow;
1113
let center = { lat: 40.749933, lng: -73.98633 }; // New York City
1214
async function initMap() {
1315
// Request needed libraries.
14-
//@ts-ignore
15-
const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
16-
google.maps.importLibrary("marker"),
17-
google.maps.importLibrary("places")
16+
const [] = await Promise.all([
17+
google.maps.importLibrary('marker'),
18+
google.maps.importLibrary('places'),
1819
]);
19-
// Initialize the map.
20-
map = new google.maps.Map(document.getElementById('map'), {
21-
center,
22-
zoom: 13,
23-
mapId: '4504f8b37365c3d0',
20+
// [START maps_place_autocomplete_map_add]
21+
// Get the inner map.
22+
innerMap = mapElement.innerMap;
23+
innerMap.setOptions({
2424
mapTypeControl: false,
2525
});
26-
// [START maps_place_autocomplete_map_add]
27-
//@ts-ignore
28-
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
29-
//@ts-ignore
30-
placeAutocomplete.id = 'place-autocomplete-input';
31-
placeAutocomplete.locationBias = center;
32-
const card = document.getElementById('place-autocomplete-card');
33-
//@ts-ignore
34-
card.appendChild(placeAutocomplete);
35-
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
26+
// Use the bounds_changed event to restrict results to the current map bounds.
27+
google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
28+
placeAutocomplete.locationRestriction = innerMap.getBounds();
29+
});
3630
// [END maps_place_autocomplete_map_add]
3731
// Create the marker and infowindow.
3832
marker = new google.maps.marker.AdvancedMarkerElement({
39-
map,
33+
map: innerMap,
4034
});
4135
infoWindow = new google.maps.InfoWindow({});
4236
// [START maps_place_autocomplete_map_listener]
4337
// Add the gmp-placeselect listener, and display the results on the map.
4438
//@ts-ignore
4539
placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
4640
const place = placePrediction.toPlace();
47-
await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
41+
await place.fetchFields({
42+
fields: ['displayName', 'formattedAddress', 'location'],
43+
});
4844
// If the place has a geometry, then present it on a map.
4945
if (place.viewport) {
50-
map.fitBounds(place.viewport);
46+
innerMap.fitBounds(place.viewport);
5147
}
5248
else {
53-
map.setCenter(place.location);
54-
map.setZoom(17);
49+
innerMap.setCenter(place.location);
50+
innerMap.setZoom(17);
5551
}
56-
let content = '<div id="infowindow-content">' +
57-
'<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
58-
'<span id="place-address">' + place.formattedAddress + '</span>' +
59-
'</div>';
52+
let content = document.createElement('div');
53+
let nameText = document.createElement('span');
54+
nameText.textContent = place.displayName;
55+
content.appendChild(nameText);
56+
content.appendChild(document.createElement('br'));
57+
let addressText = document.createElement('span');
58+
addressText.textContent = place.formattedAddress;
59+
content.appendChild(addressText);
6060
updateInfoWindow(content, place.location);
6161
marker.position = place.location;
6262
});
@@ -67,7 +67,7 @@ function updateInfoWindow(content, center) {
6767
infoWindow.setContent(content);
6868
infoWindow.setPosition(center);
6969
infoWindow.open({
70-
map,
70+
map: innerMap,
7171
anchor: marker,
7272
shouldFocus: false,
7373
});

0 commit comments

Comments
 (0)