diff --git a/dist/samples/place-nearby-search/app/index.html b/dist/samples/place-nearby-search/app/index.html
index cb2aac65..49022299 100644
--- a/dist/samples/place-nearby-search/app/index.html
+++ b/dist/samples/place-nearby-search/app/index.html
@@ -6,18 +6,31 @@
-->
-
- Nearby Search
-
-
-
-
-
+
+ Nearby Search
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
diff --git a/dist/samples/place-nearby-search/app/index.ts b/dist/samples/place-nearby-search/app/index.ts
index dd92b4e5..e2f7a340 100644
--- a/dist/samples/place-nearby-search/app/index.ts
+++ b/dist/samples/place-nearby-search/app/index.ts
@@ -5,74 +5,117 @@
*/
// [START maps_place_nearby_search]
-let map;
+const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
+let innerMap;
+const advancedMarkerElement = document.querySelector('gmp-advanced-marker') as google.maps.marker.AdvancedMarkerElement;
+let center;
+let typeSelect;
+let infoWindow;
async function initMap() {
const { Map, InfoWindow } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary;
+ const { LatLng } = await google.maps.importLibrary("core") as google.maps.CoreLibrary;
- let center = new google.maps.LatLng(52.369358, 4.889258);
-
- map = new Map(document.getElementById('map') as HTMLElement, {
- center: center,
- zoom: 11,
- mapId: 'DEMO_MAP_ID',
+ innerMap = mapElement.innerMap;
+ innerMap.setOptions({
mapTypeControl: false,
});
+
+ typeSelect = document.querySelector(".type-select");
+
+ typeSelect.addEventListener('change', () => {
+ nearbySearch();
+ });
+
+ infoWindow = new InfoWindow();
+
+ // Kick off an initial search.
nearbySearch();
}
async function nearbySearch() {
- //@ts-ignore
const { Place, SearchNearbyRankPreference } = await google.maps.importLibrary('places') as google.maps.PlacesLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
+ const { spherical } = await google.maps.importLibrary('geometry') as google.maps.GeometryLibrary;
// [START maps_place_nearby_search_request]
-
- // Restrict within the map viewport.
- let center = new google.maps.LatLng(52.369358, 4.889258);
+ // Get bounds and radius to constrain search.
+ center = mapElement.center;
+ let bounds = innerMap.getBounds();
+ const ne = bounds.getNorthEast();
+ const sw = bounds.getSouthWest();
+ const diameter = spherical.computeDistanceBetween(ne, sw);
+ const radius = Math.min((diameter / 2), 50000); // Radius cannot be more than 50000.
const request = {
// required parameters
- fields: ['displayName', 'location', 'businessStatus'],
+ fields: ['displayName', 'location', 'formattedAddress', 'googleMapsURI'],
locationRestriction: {
- center: center,
- radius: 500,
+ center,
+ radius,
},
// optional parameters
- includedPrimaryTypes: ['restaurant'],
+ includedPrimaryTypes: [typeSelect.value],
maxResultCount: 5,
rankPreference: SearchNearbyRankPreference.POPULARITY,
- language: 'en-US',
- region: 'us',
};
- //@ts-ignore
const { places } = await Place.searchNearby(request);
// [END maps_place_nearby_search_request]
if (places.length) {
- console.log(places);
-
const { LatLngBounds } = await google.maps.importLibrary("core") as google.maps.CoreLibrary;
const bounds = new LatLngBounds();
+ // First remove all existing markers.
+ for (const marker of mapElement.querySelectorAll('gmp-advanced-marker')) marker.remove();
+
// Loop through and get all the results.
- places.forEach((place) => {
- const markerView = new AdvancedMarkerElement({
- map,
+ places.forEach(place => {
+ if (!place.location) return;
+ bounds.extend(place.location);
+
+ const marker = new AdvancedMarkerElement({
+ map: innerMap,
position: place.location,
title: place.displayName,
});
- bounds.extend(place.location as google.maps.LatLng);
- console.log(place);
+ // Build the content of the InfoWindow safely using DOM elements.
+ const content = document.createElement('div');
+ const address = document.createElement('div');
+ address.textContent = place.formattedAddress || '';
+ const placeId = document.createElement('div');
+ placeId.textContent = place.id;
+ content.append(address, placeId);
+
+ if (place.googleMapsURI) {
+ const link = document.createElement('a');
+ link.href = place.googleMapsURI;
+ link.target = '_blank';
+ link.textContent = 'View Details on Google Maps';
+ content.appendChild(link);
+ }
+
+ marker.addListener('gmp-click', () => {
+ innerMap.panTo(place.location);
+ updateInfoWindow(place.displayName, content, marker);
+ });
});
-
- map.fitBounds(bounds);
+
+ innerMap.fitBounds(bounds, 100);
} else {
- console.log("No results");
+ console.log('No results');
}
}
+function updateInfoWindow(title, content, anchor) {
+ infoWindow.setContent(content);
+ infoWindow.setHeaderContent(title);
+ infoWindow.open({
+ anchor,
+ });
+}
+
initMap();
// [END maps_place_nearby_search]
diff --git a/dist/samples/place-nearby-search/app/style.css b/dist/samples/place-nearby-search/app/style.css
index 68d7d2d3..ed6c2a14 100644
--- a/dist/samples/place-nearby-search/app/style.css
+++ b/dist/samples/place-nearby-search/app/style.css
@@ -8,7 +8,13 @@
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
-#map {
+gmp-map {
+ height: 100%;
+}
+
+#map-container {
+ display: flex;
+ flex-direction: row;
height: 100%;
}
@@ -22,4 +28,15 @@ body {
padding: 0;
}
-/* [END maps_place_nearby_search] */
\ No newline at end of file
+.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;
+ }
+
+/* [END maps_place_nearby_search] */
diff --git a/dist/samples/place-nearby-search/dist/assets/index-CJm6hyIn.js b/dist/samples/place-nearby-search/dist/assets/index-CJm6hyIn.js
new file mode 100644
index 00000000..501dbf22
--- /dev/null
+++ b/dist/samples/place-nearby-search/dist/assets/index-CJm6hyIn.js
@@ -0,0 +1,5 @@
+(function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))c(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const i of t.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&c(i)}).observe(document,{childList:!0,subtree:!0});function r(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function c(e){if(e.ep)return;e.ep=!0;const t=r(e);fetch(e.href,t)}})();/**
+ * @license
+ * Copyright 2024 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */const p=document.querySelector("gmp-map");let a;document.querySelector("gmp-advanced-marker");let w,u,d;async function P(){const{Map:s,InfoWindow:n}=await google.maps.importLibrary("maps"),{LatLng:r}=await google.maps.importLibrary("core");a=p.innerMap,a.setOptions({mapTypeControl:!1}),u=document.querySelector(".type-select"),u.addEventListener("change",()=>{b()}),d=new n,b()}async function b(){const{Place:s,SearchNearbyRankPreference:n}=await google.maps.importLibrary("places"),{AdvancedMarkerElement:r}=await google.maps.importLibrary("marker"),{spherical:c}=await google.maps.importLibrary("geometry");w=p.center;let e=a.getBounds();const t=e.getNorthEast(),i=e.getSouthWest(),v=c.computeDistanceBetween(t,i),M=Math.min(v/2,5e4),E={fields:["displayName","location","formattedAddress","googleMapsURI"],locationRestriction:{center:w,radius:M},includedPrimaryTypes:[u.value],maxResultCount:5,rankPreference:n.POPULARITY},{places:f}=await s.searchNearby(E);if(f.length){const{LatLngBounds:N}=await google.maps.importLibrary("core"),g=new N;for(const o of p.querySelectorAll("gmp-advanced-marker"))o.remove();f.forEach(o=>{if(!o.location)return;g.extend(o.location);const y=new r({map:a,position:o.location,title:o.displayName}),m=document.createElement("div"),h=document.createElement("div");h.textContent=o.formattedAddress||"";const L=document.createElement("div");if(L.textContent=o.id,m.append(h,L),o.googleMapsURI){const l=document.createElement("a");l.href=o.googleMapsURI,l.target="_blank",l.textContent="View Details on Google Maps",m.appendChild(l)}y.addListener("gmp-click",()=>{a.panTo(o.location),S(o.displayName,m,y)})}),a.fitBounds(g,100)}else console.log("No results")}function S(s,n,r){d.setContent(n),d.setHeaderContent(s),d.open({anchor:r})}P();
diff --git a/dist/samples/place-nearby-search/dist/assets/index-CKGTjz0R.css b/dist/samples/place-nearby-search/dist/assets/index-CKGTjz0R.css
new file mode 100644
index 00000000..02bc0bf2
--- /dev/null
+++ b/dist/samples/place-nearby-search/dist/assets/index-CKGTjz0R.css
@@ -0,0 +1,5 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */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}
diff --git a/dist/samples/place-nearby-search/dist/assets/index-DW_Ml_OD.css b/dist/samples/place-nearby-search/dist/assets/index-DW_Ml_OD.css
deleted file mode 100644
index 672cb7cc..00000000
--- a/dist/samples/place-nearby-search/dist/assets/index-DW_Ml_OD.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */#map{height:100%}html,body{height:100%;margin:0;padding:0}
diff --git a/dist/samples/place-nearby-search/dist/assets/index-UUptK1XA.js b/dist/samples/place-nearby-search/dist/assets/index-UUptK1XA.js
deleted file mode 100644
index 1795910c..00000000
--- a/dist/samples/place-nearby-search/dist/assets/index-UUptK1XA.js
+++ /dev/null
@@ -1,5 +0,0 @@
-(function(){const o=document.createElement("link").relList;if(o&&o.supports&&o.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))a(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const n of t.addedNodes)n.tagName==="LINK"&&n.rel==="modulepreload"&&a(n)}).observe(document,{childList:!0,subtree:!0});function r(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function a(e){if(e.ep)return;e.ep=!0;const t=r(e);fetch(e.href,t)}})();/**
- * @license
- * Copyright 2024 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */let c;async function u(){const{Map:s,InfoWindow:o}=await google.maps.importLibrary("maps");let r=new google.maps.LatLng(52.369358,4.889258);c=new s(document.getElementById("map"),{center:r,zoom:11,mapId:"DEMO_MAP_ID",mapTypeControl:!1}),d()}async function d(){const{Place:s,SearchNearbyRankPreference:o}=await google.maps.importLibrary("places"),{AdvancedMarkerElement:r}=await google.maps.importLibrary("marker");let a=new google.maps.LatLng(52.369358,4.889258);const e={fields:["displayName","location","businessStatus"],locationRestriction:{center:a,radius:500},includedPrimaryTypes:["restaurant"],maxResultCount:5,rankPreference:o.POPULARITY,language:"en-US",region:"us"},{places:t}=await s.searchNearby(e);if(t.length){console.log(t);const{LatLngBounds:n}=await google.maps.importLibrary("core"),l=new n;t.forEach(i=>{new r({map:c,position:i.location,title:i.displayName}),l.extend(i.location),console.log(i)}),c.fitBounds(l)}else console.log("No results")}u();
diff --git a/dist/samples/place-nearby-search/dist/index.html b/dist/samples/place-nearby-search/dist/index.html
index 5e894ffc..fc05141e 100644
--- a/dist/samples/place-nearby-search/dist/index.html
+++ b/dist/samples/place-nearby-search/dist/index.html
@@ -6,18 +6,31 @@
-->
-
- Nearby Search
-
-
-
-
-
+
+ Nearby Search
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
diff --git a/dist/samples/place-nearby-search/docs/index.html b/dist/samples/place-nearby-search/docs/index.html
index cb2aac65..49022299 100644
--- a/dist/samples/place-nearby-search/docs/index.html
+++ b/dist/samples/place-nearby-search/docs/index.html
@@ -6,18 +6,31 @@
-->
-
- Nearby Search
-
-
-
-
-
+
+ Nearby Search
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
diff --git a/dist/samples/place-nearby-search/docs/index.js b/dist/samples/place-nearby-search/docs/index.js
index 1ca510b3..fefe4013 100644
--- a/dist/samples/place-nearby-search/docs/index.js
+++ b/dist/samples/place-nearby-search/docs/index.js
@@ -5,61 +5,100 @@
* SPDX-License-Identifier: Apache-2.0
*/
// [START maps_place_nearby_search]
-let map;
+const mapElement = document.querySelector('gmp-map');
+let innerMap;
+const advancedMarkerElement = document.querySelector('gmp-advanced-marker');
+let center;
+let typeSelect;
+let infoWindow;
async function initMap() {
const { Map, InfoWindow } = await google.maps.importLibrary('maps');
- let center = new google.maps.LatLng(52.369358, 4.889258);
- map = new Map(document.getElementById('map'), {
- center: center,
- zoom: 11,
- mapId: 'DEMO_MAP_ID',
+ const { LatLng } = await google.maps.importLibrary("core");
+ innerMap = mapElement.innerMap;
+ innerMap.setOptions({
mapTypeControl: false,
});
+ typeSelect = document.querySelector(".type-select");
+ typeSelect.addEventListener('change', () => {
+ nearbySearch();
+ });
+ infoWindow = new InfoWindow();
+ // Kick off an initial search.
nearbySearch();
}
async function nearbySearch() {
- //@ts-ignore
const { Place, SearchNearbyRankPreference } = await google.maps.importLibrary('places');
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
+ const { spherical } = await google.maps.importLibrary('geometry');
// [START maps_place_nearby_search_request]
- // Restrict within the map viewport.
- let center = new google.maps.LatLng(52.369358, 4.889258);
+ // Get bounds and radius to constrain search.
+ center = mapElement.center;
+ let bounds = innerMap.getBounds();
+ const ne = bounds.getNorthEast();
+ const sw = bounds.getSouthWest();
+ const diameter = spherical.computeDistanceBetween(ne, sw);
+ const radius = Math.min((diameter / 2), 50000); // Radius cannot be more than 50000.
const request = {
// required parameters
- fields: ['displayName', 'location', 'businessStatus'],
+ fields: ['displayName', 'location', 'formattedAddress', 'googleMapsURI'],
locationRestriction: {
- center: center,
- radius: 500,
+ center,
+ radius,
},
// optional parameters
- includedPrimaryTypes: ['restaurant'],
+ includedPrimaryTypes: [typeSelect.value],
maxResultCount: 5,
rankPreference: SearchNearbyRankPreference.POPULARITY,
- language: 'en-US',
- region: 'us',
};
- //@ts-ignore
const { places } = await Place.searchNearby(request);
// [END maps_place_nearby_search_request]
if (places.length) {
- console.log(places);
const { LatLngBounds } = await google.maps.importLibrary("core");
const bounds = new LatLngBounds();
+ // First remove all existing markers.
+ for (const marker of mapElement.querySelectorAll('gmp-advanced-marker'))
+ marker.remove();
// Loop through and get all the results.
- places.forEach((place) => {
- const markerView = new AdvancedMarkerElement({
- map,
+ places.forEach(place => {
+ if (!place.location)
+ return;
+ bounds.extend(place.location);
+ const marker = new AdvancedMarkerElement({
+ map: innerMap,
position: place.location,
title: place.displayName,
});
- bounds.extend(place.location);
- console.log(place);
+ // Build the content of the InfoWindow safely using DOM elements.
+ const content = document.createElement('div');
+ const address = document.createElement('div');
+ address.textContent = place.formattedAddress || '';
+ const placeId = document.createElement('div');
+ placeId.textContent = place.id;
+ content.append(address, placeId);
+ if (place.googleMapsURI) {
+ const link = document.createElement('a');
+ link.href = place.googleMapsURI;
+ link.target = '_blank';
+ link.textContent = 'View Details on Google Maps';
+ content.appendChild(link);
+ }
+ marker.addListener('gmp-click', () => {
+ innerMap.panTo(place.location);
+ updateInfoWindow(place.displayName, content, marker);
+ });
});
- map.fitBounds(bounds);
+ innerMap.fitBounds(bounds, 100);
}
else {
- console.log("No results");
+ console.log('No results');
}
}
+function updateInfoWindow(title, content, anchor) {
+ infoWindow.setContent(content);
+ infoWindow.setHeaderContent(title);
+ infoWindow.open({
+ anchor,
+ });
+}
initMap();
// [END maps_place_nearby_search]
diff --git a/dist/samples/place-nearby-search/docs/index.ts b/dist/samples/place-nearby-search/docs/index.ts
index dd92b4e5..e2f7a340 100644
--- a/dist/samples/place-nearby-search/docs/index.ts
+++ b/dist/samples/place-nearby-search/docs/index.ts
@@ -5,74 +5,117 @@
*/
// [START maps_place_nearby_search]
-let map;
+const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
+let innerMap;
+const advancedMarkerElement = document.querySelector('gmp-advanced-marker') as google.maps.marker.AdvancedMarkerElement;
+let center;
+let typeSelect;
+let infoWindow;
async function initMap() {
const { Map, InfoWindow } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary;
+ const { LatLng } = await google.maps.importLibrary("core") as google.maps.CoreLibrary;
- let center = new google.maps.LatLng(52.369358, 4.889258);
-
- map = new Map(document.getElementById('map') as HTMLElement, {
- center: center,
- zoom: 11,
- mapId: 'DEMO_MAP_ID',
+ innerMap = mapElement.innerMap;
+ innerMap.setOptions({
mapTypeControl: false,
});
+
+ typeSelect = document.querySelector(".type-select");
+
+ typeSelect.addEventListener('change', () => {
+ nearbySearch();
+ });
+
+ infoWindow = new InfoWindow();
+
+ // Kick off an initial search.
nearbySearch();
}
async function nearbySearch() {
- //@ts-ignore
const { Place, SearchNearbyRankPreference } = await google.maps.importLibrary('places') as google.maps.PlacesLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
+ const { spherical } = await google.maps.importLibrary('geometry') as google.maps.GeometryLibrary;
// [START maps_place_nearby_search_request]
-
- // Restrict within the map viewport.
- let center = new google.maps.LatLng(52.369358, 4.889258);
+ // Get bounds and radius to constrain search.
+ center = mapElement.center;
+ let bounds = innerMap.getBounds();
+ const ne = bounds.getNorthEast();
+ const sw = bounds.getSouthWest();
+ const diameter = spherical.computeDistanceBetween(ne, sw);
+ const radius = Math.min((diameter / 2), 50000); // Radius cannot be more than 50000.
const request = {
// required parameters
- fields: ['displayName', 'location', 'businessStatus'],
+ fields: ['displayName', 'location', 'formattedAddress', 'googleMapsURI'],
locationRestriction: {
- center: center,
- radius: 500,
+ center,
+ radius,
},
// optional parameters
- includedPrimaryTypes: ['restaurant'],
+ includedPrimaryTypes: [typeSelect.value],
maxResultCount: 5,
rankPreference: SearchNearbyRankPreference.POPULARITY,
- language: 'en-US',
- region: 'us',
};
- //@ts-ignore
const { places } = await Place.searchNearby(request);
// [END maps_place_nearby_search_request]
if (places.length) {
- console.log(places);
-
const { LatLngBounds } = await google.maps.importLibrary("core") as google.maps.CoreLibrary;
const bounds = new LatLngBounds();
+ // First remove all existing markers.
+ for (const marker of mapElement.querySelectorAll('gmp-advanced-marker')) marker.remove();
+
// Loop through and get all the results.
- places.forEach((place) => {
- const markerView = new AdvancedMarkerElement({
- map,
+ places.forEach(place => {
+ if (!place.location) return;
+ bounds.extend(place.location);
+
+ const marker = new AdvancedMarkerElement({
+ map: innerMap,
position: place.location,
title: place.displayName,
});
- bounds.extend(place.location as google.maps.LatLng);
- console.log(place);
+ // Build the content of the InfoWindow safely using DOM elements.
+ const content = document.createElement('div');
+ const address = document.createElement('div');
+ address.textContent = place.formattedAddress || '';
+ const placeId = document.createElement('div');
+ placeId.textContent = place.id;
+ content.append(address, placeId);
+
+ if (place.googleMapsURI) {
+ const link = document.createElement('a');
+ link.href = place.googleMapsURI;
+ link.target = '_blank';
+ link.textContent = 'View Details on Google Maps';
+ content.appendChild(link);
+ }
+
+ marker.addListener('gmp-click', () => {
+ innerMap.panTo(place.location);
+ updateInfoWindow(place.displayName, content, marker);
+ });
});
-
- map.fitBounds(bounds);
+
+ innerMap.fitBounds(bounds, 100);
} else {
- console.log("No results");
+ console.log('No results');
}
}
+function updateInfoWindow(title, content, anchor) {
+ infoWindow.setContent(content);
+ infoWindow.setHeaderContent(title);
+ infoWindow.open({
+ anchor,
+ });
+}
+
initMap();
// [END maps_place_nearby_search]
diff --git a/dist/samples/place-nearby-search/docs/style.css b/dist/samples/place-nearby-search/docs/style.css
index 68d7d2d3..ed6c2a14 100644
--- a/dist/samples/place-nearby-search/docs/style.css
+++ b/dist/samples/place-nearby-search/docs/style.css
@@ -8,7 +8,13 @@
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
-#map {
+gmp-map {
+ height: 100%;
+}
+
+#map-container {
+ display: flex;
+ flex-direction: row;
height: 100%;
}
@@ -22,4 +28,15 @@ body {
padding: 0;
}
-/* [END maps_place_nearby_search] */
\ No newline at end of file
+.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;
+ }
+
+/* [END maps_place_nearby_search] */
diff --git a/dist/samples/place-nearby-search/jsfiddle/demo.css b/dist/samples/place-nearby-search/jsfiddle/demo.css
index fa4d8cd3..0b97404e 100644
--- a/dist/samples/place-nearby-search/jsfiddle/demo.css
+++ b/dist/samples/place-nearby-search/jsfiddle/demo.css
@@ -8,7 +8,13 @@
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
-#map {
+gmp-map {
+ height: 100%;
+}
+
+#map-container {
+ display: flex;
+ flex-direction: row;
height: 100%;
}
@@ -22,3 +28,15 @@ body {
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;
+ }
+
+
diff --git a/dist/samples/place-nearby-search/jsfiddle/demo.html b/dist/samples/place-nearby-search/jsfiddle/demo.html
index bd164ad9..413160d7 100644
--- a/dist/samples/place-nearby-search/jsfiddle/demo.html
+++ b/dist/samples/place-nearby-search/jsfiddle/demo.html
@@ -6,18 +6,31 @@
-->
-
- Nearby Search
-
-
-
-
-
+
+ Nearby Search
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
diff --git a/dist/samples/place-nearby-search/jsfiddle/demo.js b/dist/samples/place-nearby-search/jsfiddle/demo.js
index 39ddb80e..16b72103 100644
--- a/dist/samples/place-nearby-search/jsfiddle/demo.js
+++ b/dist/samples/place-nearby-search/jsfiddle/demo.js
@@ -5,61 +5,100 @@
* SPDX-License-Identifier: Apache-2.0
*/
-let map;
+const mapElement = document.querySelector('gmp-map');
+let innerMap;
+const advancedMarkerElement = document.querySelector('gmp-advanced-marker');
+let center;
+let typeSelect;
+let infoWindow;
async function initMap() {
const { Map, InfoWindow } = await google.maps.importLibrary('maps');
- let center = new google.maps.LatLng(52.369358, 4.889258);
- map = new Map(document.getElementById('map'), {
- center: center,
- zoom: 11,
- mapId: 'DEMO_MAP_ID',
+ const { LatLng } = await google.maps.importLibrary("core");
+ innerMap = mapElement.innerMap;
+ innerMap.setOptions({
mapTypeControl: false,
});
+ typeSelect = document.querySelector(".type-select");
+ typeSelect.addEventListener('change', () => {
+ nearbySearch();
+ });
+ infoWindow = new InfoWindow();
+ // Kick off an initial search.
nearbySearch();
}
async function nearbySearch() {
- //@ts-ignore
const { Place, SearchNearbyRankPreference } = await google.maps.importLibrary('places');
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
+ const { spherical } = await google.maps.importLibrary('geometry');
- // Restrict within the map viewport.
- let center = new google.maps.LatLng(52.369358, 4.889258);
+ // Get bounds and radius to constrain search.
+ center = mapElement.center;
+ let bounds = innerMap.getBounds();
+ const ne = bounds.getNorthEast();
+ const sw = bounds.getSouthWest();
+ const diameter = spherical.computeDistanceBetween(ne, sw);
+ const radius = Math.min((diameter / 2), 50000); // Radius cannot be more than 50000.
const request = {
// required parameters
- fields: ['displayName', 'location', 'businessStatus'],
+ fields: ['displayName', 'location', 'formattedAddress', 'googleMapsURI'],
locationRestriction: {
- center: center,
- radius: 500,
+ center,
+ radius,
},
// optional parameters
- includedPrimaryTypes: ['restaurant'],
+ includedPrimaryTypes: [typeSelect.value],
maxResultCount: 5,
rankPreference: SearchNearbyRankPreference.POPULARITY,
- language: 'en-US',
- region: 'us',
};
- //@ts-ignore
const { places } = await Place.searchNearby(request);
if (places.length) {
- console.log(places);
const { LatLngBounds } = await google.maps.importLibrary("core");
const bounds = new LatLngBounds();
+ // First remove all existing markers.
+ for (const marker of mapElement.querySelectorAll('gmp-advanced-marker'))
+ marker.remove();
// Loop through and get all the results.
- places.forEach((place) => {
- const markerView = new AdvancedMarkerElement({
- map,
+ places.forEach(place => {
+ if (!place.location)
+ return;
+ bounds.extend(place.location);
+ const marker = new AdvancedMarkerElement({
+ map: innerMap,
position: place.location,
title: place.displayName,
});
- bounds.extend(place.location);
- console.log(place);
+ // Build the content of the InfoWindow safely using DOM elements.
+ const content = document.createElement('div');
+ const address = document.createElement('div');
+ address.textContent = place.formattedAddress || '';
+ const placeId = document.createElement('div');
+ placeId.textContent = place.id;
+ content.append(address, placeId);
+ if (place.googleMapsURI) {
+ const link = document.createElement('a');
+ link.href = place.googleMapsURI;
+ link.target = '_blank';
+ link.textContent = 'View Details on Google Maps';
+ content.appendChild(link);
+ }
+ marker.addListener('gmp-click', () => {
+ innerMap.panTo(place.location);
+ updateInfoWindow(place.displayName, content, marker);
+ });
});
- map.fitBounds(bounds);
+ innerMap.fitBounds(bounds, 100);
}
else {
- console.log("No results");
+ console.log('No results');
}
}
+function updateInfoWindow(title, content, anchor) {
+ infoWindow.setContent(content);
+ infoWindow.setHeaderContent(title);
+ infoWindow.open({
+ anchor,
+ });
+}
initMap();