Skip to content

Commit e0f0354

Browse files
googlemaps-botgooglemaps-bot
authored
Update dist folder [skip ci] (#732)
1 parent 89fd6e5 commit e0f0354

File tree

15 files changed

+431
-163
lines changed

15 files changed

+431
-163
lines changed

‎dist/samples/place-nearby-search/app/index.html‎

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,31 @@
66
-->
77
<!-- [START maps_place_nearby_search] -->
88
<html>
9-
<head>
10-
<title>Nearby Search</title>
119

12-
<link rel="stylesheet" type="text/css" href="./style.css" />
13-
<script type="module" src="./index.js"></script>
14-
</head>
15-
<body>
16-
<div id="map"></div>
10+
<head>
11+
<title>Nearby Search</title>
12+
13+
<link rel="stylesheet" type="text/css" href="./style.css" />
14+
<script type="module" src="./index.js"></script>
15+
<!-- prettier-ignore -->
16+
<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)) })
17+
({ key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta" });</script>
18+
</head>
19+
20+
<body>
21+
<gmp-map center="45.438646,12.327573" zoom="14" map-id="DEMO_MAP_ID"><!-- Map id is required for Advanced Markers. -->
22+
<gmp-advanced-marker></gmp-advanced-marker>
23+
<div id="controls" slot="control-inline-start-block-start">
24+
<select name="types" class="type-select">
25+
<option value="cafe" selected>Cafe</option>
26+
<option value="restaurant">Restaurant</option>
27+
<option value="museum">Museum</option>
28+
<option value="monument">Monument</option>
29+
<option value="park">Park</option>
30+
</select>
31+
</div>
32+
</gmp-map>
33+
</body>
1734

18-
<!-- prettier-ignore -->
19-
<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))})
20-
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta"});</script>
21-
</body>
2235
</html>
2336
<!-- [END maps_place_nearby_search] -->

‎dist/samples/place-nearby-search/app/index.ts‎

Lines changed: 71 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,74 +5,117 @@
55
*/
66

77
// [START maps_place_nearby_search]
8-
let map;
8+
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
9+
let innerMap;
10+
const advancedMarkerElement = document.querySelector('gmp-advanced-marker') as google.maps.marker.AdvancedMarkerElement;
11+
let center;
12+
let typeSelect;
13+
let infoWindow;
914

1015
async function initMap() {
1116
const { Map, InfoWindow } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary;
17+
const { LatLng } = await google.maps.importLibrary("core") as google.maps.CoreLibrary;
1218

13-
let center = new google.maps.LatLng(52.369358, 4.889258);
14-
15-
map = new Map(document.getElementById('map') as HTMLElement, {
16-
center: center,
17-
zoom: 11,
18-
mapId: 'DEMO_MAP_ID',
19+
innerMap = mapElement.innerMap;
20+
innerMap.setOptions({
1921
mapTypeControl: false,
2022
});
23+
24+
typeSelect = document.querySelector(".type-select");
25+
26+
typeSelect.addEventListener('change', () => {
27+
nearbySearch();
28+
});
29+
30+
infoWindow = new InfoWindow();
31+
32+
// Kick off an initial search.
2133
nearbySearch();
2234
}
2335

2436
async function nearbySearch() {
25-
//@ts-ignore
2637
const { Place, SearchNearbyRankPreference } = await google.maps.importLibrary('places') as google.maps.PlacesLibrary;
2738
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
39+
const { spherical } = await google.maps.importLibrary('geometry') as google.maps.GeometryLibrary;
2840
// [START maps_place_nearby_search_request]
29-
30-
// Restrict within the map viewport.
31-
let center = new google.maps.LatLng(52.369358, 4.889258);
41+
// Get bounds and radius to constrain search.
42+
center = mapElement.center;
43+
let bounds = innerMap.getBounds();
44+
const ne = bounds.getNorthEast();
45+
const sw = bounds.getSouthWest();
46+
const diameter = spherical.computeDistanceBetween(ne, sw);
47+
const radius = Math.min((diameter / 2), 50000); // Radius cannot be more than 50000.
3248

3349
const request = {
3450
// required parameters
35-
fields: ['displayName', 'location', 'businessStatus'],
51+
fields: ['displayName', 'location', 'formattedAddress', 'googleMapsURI'],
3652
locationRestriction: {
37-
center: center,
38-
radius: 500,
53+
center,
54+
radius,
3955
},
4056
// optional parameters
41-
includedPrimaryTypes: ['restaurant'],
57+
includedPrimaryTypes: [typeSelect.value],
4258
maxResultCount: 5,
4359
rankPreference: SearchNearbyRankPreference.POPULARITY,
44-
language: 'en-US',
45-
region: 'us',
4660
};
4761

48-
//@ts-ignore
4962
const { places } = await Place.searchNearby(request);
5063
// [END maps_place_nearby_search_request]
5164

5265
if (places.length) {
53-
console.log(places);
54-
5566
const { LatLngBounds } = await google.maps.importLibrary("core") as google.maps.CoreLibrary;
5667
const bounds = new LatLngBounds();
5768

69+
// First remove all existing markers.
70+
for (const marker of mapElement.querySelectorAll('gmp-advanced-marker')) marker.remove();
71+
5872
// Loop through and get all the results.
59-
places.forEach((place) => {
60-
const markerView = new AdvancedMarkerElement({
61-
map,
73+
places.forEach(place => {
74+
if (!place.location) return;
75+
bounds.extend(place.location);
76+
77+
const marker = new AdvancedMarkerElement({
78+
map: innerMap,
6279
position: place.location,
6380
title: place.displayName,
6481
});
6582

66-
bounds.extend(place.location as google.maps.LatLng);
67-
console.log(place);
83+
// Build the content of the InfoWindow safely using DOM elements.
84+
const content = document.createElement('div');
85+
const address = document.createElement('div');
86+
address.textContent = place.formattedAddress || '';
87+
const placeId = document.createElement('div');
88+
placeId.textContent = place.id;
89+
content.append(address, placeId);
90+
91+
if (place.googleMapsURI) {
92+
const link = document.createElement('a');
93+
link.href = place.googleMapsURI;
94+
link.target = '_blank';
95+
link.textContent = 'View Details on Google Maps';
96+
content.appendChild(link);
97+
}
98+
99+
marker.addListener('gmp-click', () => {
100+
innerMap.panTo(place.location);
101+
updateInfoWindow(place.displayName, content, marker);
102+
});
68103
});
69-
70-
map.fitBounds(bounds);
104+
105+
innerMap.fitBounds(bounds, 100);
71106

72107
} else {
73-
console.log("No results");
108+
console.log('No results');
74109
}
75110
}
76111

112+
function updateInfoWindow(title, content, anchor) {
113+
infoWindow.setContent(content);
114+
infoWindow.setHeaderContent(title);
115+
infoWindow.open({
116+
anchor,
117+
});
118+
}
119+
77120
initMap();
78121
// [END maps_place_nearby_search]

‎dist/samples/place-nearby-search/app/style.css‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,13 @@
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 {
12+
height: 100%;
13+
}
14+
15+
#map-container {
16+
display: flex;
17+
flex-direction: row;
1218
height: 100%;
1319
}
1420

@@ -22,4 +28,15 @@ body {
2228
padding: 0;
2329
}
2430

25-
/* [END maps_place_nearby_search] */
31+
.type-select {
32+
width: 400px;
33+
height: 32px;
34+
border: 1px solid #000;
35+
border-radius: 10px;
36+
flex-grow: 1;
37+
padding: 0 10px;
38+
margin-left: 10px;
39+
margin-top: 10px;
40+
}
41+
42+
/* [END maps_place_nearby_search] */

‎dist/samples/place-nearby-search/dist/assets/index-CJm6hyIn.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-nearby-search/dist/assets/index-CKGTjz0R.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/**
2+
* @license
3+
* Copyright 2019 Google LLC. All Rights Reserved.
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/gmp-map{height:100%}#map-container{display:flex;flex-direction:row;height:100%}html,body{height:100%;margin:0;padding:0}.type-select{width:400px;height:32px;border:1px solid #000;border-radius:10px;flex-grow:1;padding:0 10px;margin-left:10px;margin-top:10px}

‎dist/samples/place-nearby-search/dist/assets/index-DW_Ml_OD.css‎

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

‎dist/samples/place-nearby-search/dist/assets/index-UUptK1XA.js‎

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

‎dist/samples/place-nearby-search/dist/index.html‎

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,31 @@
66
-->
77
<!-- [START maps_place_nearby_search] -->
88
<html>
9-
<head>
10-
<title>Nearby Search</title>
119

12-
<script type="module" crossorigin src="./assets/index-UUptK1XA.js"></script>
13-
<link rel="stylesheet" crossorigin href="./assets/index-DW_Ml_OD.css">
14-
</head>
15-
<body>
16-
<div id="map"></div>
10+
<head>
11+
<title>Nearby Search</title>
12+
13+
<!-- prettier-ignore -->
14+
<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)) })
15+
({ key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta" });</script>
16+
<script type="module" crossorigin src="./assets/index-CJm6hyIn.js"></script>
17+
<link rel="stylesheet" crossorigin href="./assets/index-CKGTjz0R.css">
18+
</head>
19+
20+
<body>
21+
<gmp-map center="45.438646,12.327573" zoom="14" map-id="DEMO_MAP_ID"><!-- Map id is required for Advanced Markers. -->
22+
<gmp-advanced-marker></gmp-advanced-marker>
23+
<div id="controls" slot="control-inline-start-block-start">
24+
<select name="types" class="type-select">
25+
<option value="cafe" selected>Cafe</option>
26+
<option value="restaurant">Restaurant</option>
27+
<option value="museum">Museum</option>
28+
<option value="monument">Monument</option>
29+
<option value="park">Park</option>
30+
</select>
31+
</div>
32+
</gmp-map>
33+
</body>
1734

18-
<!-- prettier-ignore -->
19-
<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))})
20-
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta"});</script>
21-
</body>
2235
</html>
2336
<!-- [END maps_place_nearby_search] -->

‎dist/samples/place-nearby-search/docs/index.html‎

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,31 @@
66
-->
77
<!-- [START maps_place_nearby_search] -->
88
<html>
9-
<head>
10-
<title>Nearby Search</title>
119

12-
<link rel="stylesheet" type="text/css" href="./style.css" />
13-
<script type="module" src="./index.js"></script>
14-
</head>
15-
<body>
16-
<div id="map"></div>
10+
<head>
11+
<title>Nearby Search</title>
12+
13+
<link rel="stylesheet" type="text/css" href="./style.css" />
14+
<script type="module" src="./index.js"></script>
15+
<!-- prettier-ignore -->
16+
<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)) })
17+
({ key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta" });</script>
18+
</head>
19+
20+
<body>
21+
<gmp-map center="45.438646,12.327573" zoom="14" map-id="DEMO_MAP_ID"><!-- Map id is required for Advanced Markers. -->
22+
<gmp-advanced-marker></gmp-advanced-marker>
23+
<div id="controls" slot="control-inline-start-block-start">
24+
<select name="types" class="type-select">
25+
<option value="cafe" selected>Cafe</option>
26+
<option value="restaurant">Restaurant</option>
27+
<option value="museum">Museum</option>
28+
<option value="monument">Monument</option>
29+
<option value="park">Park</option>
30+
</select>
31+
</div>
32+
</gmp-map>
33+
</body>
1734

18-
<!-- prettier-ignore -->
19-
<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))})
20-
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta"});</script>
21-
</body>
2235
</html>
2336
<!-- [END maps_place_nearby_search] -->

0 commit comments

Comments
 (0)