diff --git a/dist/samples/ui-kit-place-search/app/index.html b/dist/samples/ui-kit-place-search/app/index.html index d8de3c01..e8ba67d0 100644 --- a/dist/samples/ui-kit-place-search/app/index.html +++ b/dist/samples/ui-kit-place-search/app/index.html @@ -13,7 +13,6 @@ -

Place List Nearby Search with Google Maps

diff --git a/dist/samples/ui-kit-place-search/app/index.ts b/dist/samples/ui-kit-place-search/app/index.ts index f71fe30c..09e462d8 100644 --- a/dist/samples/ui-kit-place-search/app/index.ts +++ b/dist/samples/ui-kit-place-search/app/index.ts @@ -12,7 +12,7 @@ const placeDetails = document.querySelector("gmp-place-details") as any; let marker = document.querySelector('gmp-advanced-marker') as any; /* [END maps_ui_kit_place_search_query_selectors] */ let markers = {}; -let infowindow; +let infoWindow; let mapCenter; async function initMap(): Promise { @@ -20,14 +20,16 @@ async function initMap(): Promise { const { InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { spherical } = await google.maps.importLibrary("geometry") as google.maps.GeometryLibrary; - infowindow = new google.maps.InfoWindow; + infoWindow = new google.maps.InfoWindow; function getContainingCircle(bounds) { const diameter = spherical.computeDistanceBetween( bounds.getNorthEast(), bounds.getSouthWest() ); - return { center: bounds.getCenter(), radius: diameter / 2 }; + const calculatedRadius = diameter / 2; + const cappedRadius = Math.min(calculatedRadius, 50000); // Cap the radius to avoid an error. + return { center: bounds.getCenter(), radius: cappedRadius }; } findCurrentLocation(); @@ -41,7 +43,6 @@ async function initMap(): Promise { typeSelect.addEventListener("change", (event) => { // First remove all existing markers. for(marker in markers){ - console.log(marker); markers[marker].map = null; } markers = {}; @@ -53,7 +54,7 @@ async function initMap(): Promise { ), includedPrimaryTypes: [typeSelect.value], }).then(addMarkers); - + // Handle user selection in Place Details. placeList.addEventListener("gmp-placeselect", ({ place }) => { markers[place.id].click(); }); @@ -79,20 +80,20 @@ async function addMarkers(){ bounds.extend(place.location); marker.addListener('gmp-click',(event) => { - if(infowindow.isOpen){ - infowindow.close(); + if(infoWindow.isOpen){ + infoWindow.close(); } placeDetails.configureFromPlace(place); placeDetails.style.width = "350px"; - infowindow.setOptions({ + infoWindow.setOptions({ content: placeDetails }); - infowindow.open({ + infoWindow.open({ anchor: marker, map: map.innerMap }); placeDetails.addEventListener('gmp-load',() => { - map.innerMap.fitBounds(place.viewport, {top: placeDetails.offsetHeight || 206, left: 200}); + map.innerMap.fitBounds(place.viewport, { top: 400, left: 200 }); }); }); diff --git a/dist/samples/ui-kit-place-search/app/style.css b/dist/samples/ui-kit-place-search/app/style.css index d432723d..90b4c949 100644 --- a/dist/samples/ui-kit-place-search/app/style.css +++ b/dist/samples/ui-kit-place-search/app/style.css @@ -24,9 +24,12 @@ html, gmp-map { box-sizing: border-box; padding: 0 20px 20px; + height: 600px; } .overlay { + position: relative; + top: 40px; margin: 20px; width: 400px; } @@ -55,7 +58,7 @@ html, } .list-container { - height: 600px; + height: 400px; overflow: auto; border-radius: 10px; } diff --git a/dist/samples/ui-kit-place-search/dist/assets/index-4cFOkOyn.js b/dist/samples/ui-kit-place-search/dist/assets/index-4cFOkOyn.js new file mode 100644 index 00000000..b26b066c --- /dev/null +++ b/dist/samples/ui-kit-place-search/dist/assets/index-4cFOkOyn.js @@ -0,0 +1,5 @@ +(function(){const i=document.createElement("link").relList;if(i&&i.supports&&i.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))n(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const d of t.addedNodes)d.tagName==="LINK"&&d.rel==="modulepreload"&&n(d)}).observe(document,{childList:!0,subtree:!0});function o(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 n(e){if(e.ep)return;e.ep=!0;const t=o(e);fetch(e.href,t)}})();/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */const r=document.querySelector("gmp-map"),p=document.querySelector("gmp-place-list"),u=document.querySelector(".type-select"),l=document.querySelector("gmp-place-details");let m=document.querySelector("gmp-advanced-marker"),s={},c;async function g(){await google.maps.importLibrary("places"),await google.maps.importLibrary("maps");const{spherical:a}=await google.maps.importLibrary("geometry");c=new google.maps.InfoWindow;function i(o){const e=a.computeDistanceBetween(o.getNorthEast(),o.getSouthWest())/2,t=Math.min(e,5e4);return{center:o.getCenter(),radius:t}}y(),r.innerMap.setOptions({mapTypeControl:!1,clickableIcons:!1}),u.addEventListener("change",o=>{for(m in s)s[m].map=null;s={},u.value&&(p.configureFromSearchNearbyRequest({locationRestriction:i(r.innerMap.getBounds()),includedPrimaryTypes:[u.value]}).then(f),p.addEventListener("gmp-placeselect",({place:n})=>{s[n.id].click()}))})}async function f(){const{AdvancedMarkerElement:a}=await google.maps.importLibrary("marker"),{LatLngBounds:i}=await google.maps.importLibrary("core"),o=new i;p.places.length>0&&p.places.forEach(n=>{let e=new a({map:r.innerMap,position:n.location});s[n.id]=e,o.extend(n.location),e.addListener("gmp-click",t=>{c.isOpen&&c.close(),l.configureFromPlace(n),l.style.width="350px",c.setOptions({content:l}),c.open({anchor:e,map:r.innerMap}),l.addEventListener("gmp-load",()=>{r.innerMap.fitBounds(n.viewport,{top:400,left:200})})}),r.innerMap.setCenter(o.getCenter()),r.innerMap.fitBounds(o)})}async function y(){const{LatLng:a}=await google.maps.importLibrary("core");navigator.geolocation?navigator.geolocation.getCurrentPosition(i=>{const o=new a(i.coords.latitude,i.coords.longitude);r.innerMap.panTo(o),r.innerMap.setZoom(14)},()=>{console.log("The Geolocation service failed."),r.innerMap.setZoom(14)}):(console.log("Your browser doesn't support geolocation"),r.innerMap.setZoom(14))}window.initMap=g; diff --git a/dist/samples/ui-kit-place-search/dist/assets/index-BaQItlwa.css b/dist/samples/ui-kit-place-search/dist/assets/index-BaQItlwa.css deleted file mode 100644 index ee2d4409..00000000 --- a/dist/samples/ui-kit-place-search/dist/assets/index-BaQItlwa.css +++ /dev/null @@ -1,5 +0,0 @@ -/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */html,body{height:100%;margin:0}body{display:flex;flex-direction:column;font-family:Arial,Helvetica,sans-serif}h1{font-size:16px;text-align:center}gmp-map{box-sizing:border-box;padding:0 20px 20px}.overlay{margin:20px;width:400px}.controls{display:flex;gap:10px;margin-bottom:10px;height:32px}.search-button{background-color:#5491f5;color:#fff;border:1px solid #ccc;border-radius:5px;width:100px;cursor:pointer}.type-select{border:1px solid #ccc;border-radius:5px;flex-grow:1;padding:0 10px}.list-container{height:600px;overflow:auto;border-radius:10px}gmp-place-list{background-color:#fff} diff --git a/dist/samples/ui-kit-place-search/dist/assets/index-BmKxyk8Z.js b/dist/samples/ui-kit-place-search/dist/assets/index-BmKxyk8Z.js deleted file mode 100644 index ec87e1ac..00000000 --- a/dist/samples/ui-kit-place-search/dist/assets/index-BmKxyk8Z.js +++ /dev/null @@ -1,5 +0,0 @@ -(function(){const i=document.createElement("link").relList;if(i&&i.supports&&i.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))o(e);new MutationObserver(e=>{for(const n of e)if(n.type==="childList")for(const d of n.addedNodes)d.tagName==="LINK"&&d.rel==="modulepreload"&&o(d)}).observe(document,{childList:!0,subtree:!0});function t(e){const n={};return e.integrity&&(n.integrity=e.integrity),e.referrerPolicy&&(n.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?n.credentials="include":e.crossOrigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function o(e){if(e.ep)return;e.ep=!0;const n=t(e);fetch(e.href,n)}})();/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */const r=document.querySelector("gmp-map"),p=document.querySelector("gmp-place-list"),u=document.querySelector(".type-select"),s=document.querySelector("gmp-place-details");let m=document.querySelector("gmp-advanced-marker"),c={},l;async function g(){await google.maps.importLibrary("places"),await google.maps.importLibrary("maps");const{spherical:a}=await google.maps.importLibrary("geometry");l=new google.maps.InfoWindow;function i(t){const o=a.computeDistanceBetween(t.getNorthEast(),t.getSouthWest());return{center:t.getCenter(),radius:o/2}}y(),r.innerMap.setOptions({mapTypeControl:!1,clickableIcons:!1}),u.addEventListener("change",t=>{for(m in c)console.log(m),c[m].map=null;c={},u.value&&(p.configureFromSearchNearbyRequest({locationRestriction:i(r.innerMap.getBounds()),includedPrimaryTypes:[u.value]}).then(f),p.addEventListener("gmp-placeselect",({place:o})=>{c[o.id].click()}))})}async function f(){const{AdvancedMarkerElement:a}=await google.maps.importLibrary("marker"),{LatLngBounds:i}=await google.maps.importLibrary("core"),t=new i;p.places.length>0&&p.places.forEach(o=>{let e=new a({map:r.innerMap,position:o.location});c[o.id]=e,t.extend(o.location),e.addListener("gmp-click",n=>{l.isOpen&&l.close(),s.configureFromPlace(o),s.style.width="350px",l.setOptions({content:s}),l.open({anchor:e,map:r.innerMap}),s.addEventListener("gmp-load",()=>{r.innerMap.fitBounds(o.viewport,{top:s.offsetHeight||206,left:200})})}),r.innerMap.setCenter(t.getCenter()),r.innerMap.fitBounds(t)})}async function y(){const{LatLng:a}=await google.maps.importLibrary("core");navigator.geolocation?navigator.geolocation.getCurrentPosition(i=>{const t=new a(i.coords.latitude,i.coords.longitude);r.innerMap.panTo(t),r.innerMap.setZoom(14)},()=>{console.log("The Geolocation service failed."),r.innerMap.setZoom(14)}):(console.log("Your browser doesn't support geolocation"),r.innerMap.setZoom(14))}window.initMap=g; diff --git a/dist/samples/ui-kit-place-search/dist/assets/index-lUDwP8WY.css b/dist/samples/ui-kit-place-search/dist/assets/index-lUDwP8WY.css new file mode 100644 index 00000000..11cb048e --- /dev/null +++ b/dist/samples/ui-kit-place-search/dist/assets/index-lUDwP8WY.css @@ -0,0 +1,5 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */html,body{height:100%;margin:0}body{display:flex;flex-direction:column;font-family:Arial,Helvetica,sans-serif}h1{font-size:16px;text-align:center}gmp-map{box-sizing:border-box;padding:0 20px 20px;height:600px}.overlay{position:relative;top:40px;margin:20px;width:400px}.controls{display:flex;gap:10px;margin-bottom:10px;height:32px}.search-button{background-color:#5491f5;color:#fff;border:1px solid #ccc;border-radius:5px;width:100px;cursor:pointer}.type-select{border:1px solid #ccc;border-radius:5px;flex-grow:1;padding:0 10px}.list-container{height:400px;overflow:auto;border-radius:10px}gmp-place-list{background-color:#fff} diff --git a/dist/samples/ui-kit-place-search/dist/index.html b/dist/samples/ui-kit-place-search/dist/index.html index 88fc91e1..63db9d8a 100644 --- a/dist/samples/ui-kit-place-search/dist/index.html +++ b/dist/samples/ui-kit-place-search/dist/index.html @@ -9,11 +9,10 @@ Place List Nearby Search with Google Maps - - + + -

Place List Nearby Search with Google Maps

diff --git a/dist/samples/ui-kit-place-search/docs/index.html b/dist/samples/ui-kit-place-search/docs/index.html index d8de3c01..e8ba67d0 100644 --- a/dist/samples/ui-kit-place-search/docs/index.html +++ b/dist/samples/ui-kit-place-search/docs/index.html @@ -13,7 +13,6 @@ -

Place List Nearby Search with Google Maps

diff --git a/dist/samples/ui-kit-place-search/docs/index.js b/dist/samples/ui-kit-place-search/docs/index.js index 68b73f6e..30b18ea3 100644 --- a/dist/samples/ui-kit-place-search/docs/index.js +++ b/dist/samples/ui-kit-place-search/docs/index.js @@ -12,16 +12,18 @@ const placeDetails = document.querySelector("gmp-place-details"); let marker = document.querySelector('gmp-advanced-marker'); /* [END maps_ui_kit_place_search_query_selectors] */ let markers = {}; -let infowindow; +let infoWindow; let mapCenter; async function initMap() { await google.maps.importLibrary("places"); const { InfoWindow } = await google.maps.importLibrary("maps"); const { spherical } = await google.maps.importLibrary("geometry"); - infowindow = new google.maps.InfoWindow; + infoWindow = new google.maps.InfoWindow; function getContainingCircle(bounds) { const diameter = spherical.computeDistanceBetween(bounds.getNorthEast(), bounds.getSouthWest()); - return { center: bounds.getCenter(), radius: diameter / 2 }; + const calculatedRadius = diameter / 2; + const cappedRadius = Math.min(calculatedRadius, 50000); // Cap the radius to avoid an error. + return { center: bounds.getCenter(), radius: cappedRadius }; } findCurrentLocation(); map.innerMap.setOptions({ @@ -32,7 +34,6 @@ async function initMap() { typeSelect.addEventListener("change", (event) => { // First remove all existing markers. for (marker in markers) { - console.log(marker); markers[marker].map = null; } markers = {}; @@ -41,6 +42,7 @@ async function initMap() { locationRestriction: getContainingCircle(map.innerMap.getBounds()), includedPrimaryTypes: [typeSelect.value], }).then(addMarkers); + // Handle user selection in Place Details. placeList.addEventListener("gmp-placeselect", ({ place }) => { markers[place.id].click(); }); @@ -61,20 +63,20 @@ async function addMarkers() { markers[place.id] = marker; bounds.extend(place.location); marker.addListener('gmp-click', (event) => { - if (infowindow.isOpen) { - infowindow.close(); + if (infoWindow.isOpen) { + infoWindow.close(); } placeDetails.configureFromPlace(place); placeDetails.style.width = "350px"; - infowindow.setOptions({ + infoWindow.setOptions({ content: placeDetails }); - infowindow.open({ + infoWindow.open({ anchor: marker, map: map.innerMap }); placeDetails.addEventListener('gmp-load', () => { - map.innerMap.fitBounds(place.viewport, { top: placeDetails.offsetHeight || 206, left: 200 }); + map.innerMap.fitBounds(place.viewport, { top: 400, left: 200 }); }); }); map.innerMap.setCenter(bounds.getCenter()); diff --git a/dist/samples/ui-kit-place-search/docs/index.ts b/dist/samples/ui-kit-place-search/docs/index.ts index f71fe30c..09e462d8 100644 --- a/dist/samples/ui-kit-place-search/docs/index.ts +++ b/dist/samples/ui-kit-place-search/docs/index.ts @@ -12,7 +12,7 @@ const placeDetails = document.querySelector("gmp-place-details") as any; let marker = document.querySelector('gmp-advanced-marker') as any; /* [END maps_ui_kit_place_search_query_selectors] */ let markers = {}; -let infowindow; +let infoWindow; let mapCenter; async function initMap(): Promise { @@ -20,14 +20,16 @@ async function initMap(): Promise { const { InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { spherical } = await google.maps.importLibrary("geometry") as google.maps.GeometryLibrary; - infowindow = new google.maps.InfoWindow; + infoWindow = new google.maps.InfoWindow; function getContainingCircle(bounds) { const diameter = spherical.computeDistanceBetween( bounds.getNorthEast(), bounds.getSouthWest() ); - return { center: bounds.getCenter(), radius: diameter / 2 }; + const calculatedRadius = diameter / 2; + const cappedRadius = Math.min(calculatedRadius, 50000); // Cap the radius to avoid an error. + return { center: bounds.getCenter(), radius: cappedRadius }; } findCurrentLocation(); @@ -41,7 +43,6 @@ async function initMap(): Promise { typeSelect.addEventListener("change", (event) => { // First remove all existing markers. for(marker in markers){ - console.log(marker); markers[marker].map = null; } markers = {}; @@ -53,7 +54,7 @@ async function initMap(): Promise { ), includedPrimaryTypes: [typeSelect.value], }).then(addMarkers); - + // Handle user selection in Place Details. placeList.addEventListener("gmp-placeselect", ({ place }) => { markers[place.id].click(); }); @@ -79,20 +80,20 @@ async function addMarkers(){ bounds.extend(place.location); marker.addListener('gmp-click',(event) => { - if(infowindow.isOpen){ - infowindow.close(); + if(infoWindow.isOpen){ + infoWindow.close(); } placeDetails.configureFromPlace(place); placeDetails.style.width = "350px"; - infowindow.setOptions({ + infoWindow.setOptions({ content: placeDetails }); - infowindow.open({ + infoWindow.open({ anchor: marker, map: map.innerMap }); placeDetails.addEventListener('gmp-load',() => { - map.innerMap.fitBounds(place.viewport, {top: placeDetails.offsetHeight || 206, left: 200}); + map.innerMap.fitBounds(place.viewport, { top: 400, left: 200 }); }); }); diff --git a/dist/samples/ui-kit-place-search/docs/style.css b/dist/samples/ui-kit-place-search/docs/style.css index d432723d..90b4c949 100644 --- a/dist/samples/ui-kit-place-search/docs/style.css +++ b/dist/samples/ui-kit-place-search/docs/style.css @@ -24,9 +24,12 @@ html, gmp-map { box-sizing: border-box; padding: 0 20px 20px; + height: 600px; } .overlay { + position: relative; + top: 40px; margin: 20px; width: 400px; } @@ -55,7 +58,7 @@ html, } .list-container { - height: 600px; + height: 400px; overflow: auto; border-radius: 10px; } diff --git a/dist/samples/ui-kit-place-search/jsfiddle/demo.css b/dist/samples/ui-kit-place-search/jsfiddle/demo.css index 48abcbea..d78d3bb5 100644 --- a/dist/samples/ui-kit-place-search/jsfiddle/demo.css +++ b/dist/samples/ui-kit-place-search/jsfiddle/demo.css @@ -24,9 +24,12 @@ html, gmp-map { box-sizing: border-box; padding: 0 20px 20px; + height: 600px; } .overlay { + position: relative; + top: 40px; margin: 20px; width: 400px; } @@ -55,7 +58,7 @@ html, } .list-container { - height: 600px; + height: 400px; overflow: auto; border-radius: 10px; } diff --git a/dist/samples/ui-kit-place-search/jsfiddle/demo.html b/dist/samples/ui-kit-place-search/jsfiddle/demo.html index 68cff270..82a21d8d 100644 --- a/dist/samples/ui-kit-place-search/jsfiddle/demo.html +++ b/dist/samples/ui-kit-place-search/jsfiddle/demo.html @@ -13,7 +13,6 @@ -

Place List Nearby Search with Google Maps

diff --git a/dist/samples/ui-kit-place-search/jsfiddle/demo.js b/dist/samples/ui-kit-place-search/jsfiddle/demo.js index 68b73f6e..30b18ea3 100644 --- a/dist/samples/ui-kit-place-search/jsfiddle/demo.js +++ b/dist/samples/ui-kit-place-search/jsfiddle/demo.js @@ -12,16 +12,18 @@ const placeDetails = document.querySelector("gmp-place-details"); let marker = document.querySelector('gmp-advanced-marker'); /* [END maps_ui_kit_place_search_query_selectors] */ let markers = {}; -let infowindow; +let infoWindow; let mapCenter; async function initMap() { await google.maps.importLibrary("places"); const { InfoWindow } = await google.maps.importLibrary("maps"); const { spherical } = await google.maps.importLibrary("geometry"); - infowindow = new google.maps.InfoWindow; + infoWindow = new google.maps.InfoWindow; function getContainingCircle(bounds) { const diameter = spherical.computeDistanceBetween(bounds.getNorthEast(), bounds.getSouthWest()); - return { center: bounds.getCenter(), radius: diameter / 2 }; + const calculatedRadius = diameter / 2; + const cappedRadius = Math.min(calculatedRadius, 50000); // Cap the radius to avoid an error. + return { center: bounds.getCenter(), radius: cappedRadius }; } findCurrentLocation(); map.innerMap.setOptions({ @@ -32,7 +34,6 @@ async function initMap() { typeSelect.addEventListener("change", (event) => { // First remove all existing markers. for (marker in markers) { - console.log(marker); markers[marker].map = null; } markers = {}; @@ -41,6 +42,7 @@ async function initMap() { locationRestriction: getContainingCircle(map.innerMap.getBounds()), includedPrimaryTypes: [typeSelect.value], }).then(addMarkers); + // Handle user selection in Place Details. placeList.addEventListener("gmp-placeselect", ({ place }) => { markers[place.id].click(); }); @@ -61,20 +63,20 @@ async function addMarkers() { markers[place.id] = marker; bounds.extend(place.location); marker.addListener('gmp-click', (event) => { - if (infowindow.isOpen) { - infowindow.close(); + if (infoWindow.isOpen) { + infoWindow.close(); } placeDetails.configureFromPlace(place); placeDetails.style.width = "350px"; - infowindow.setOptions({ + infoWindow.setOptions({ content: placeDetails }); - infowindow.open({ + infoWindow.open({ anchor: marker, map: map.innerMap }); placeDetails.addEventListener('gmp-load', () => { - map.innerMap.fitBounds(place.viewport, { top: placeDetails.offsetHeight || 206, left: 200 }); + map.innerMap.fitBounds(place.viewport, { top: 400, left: 200 }); }); }); map.innerMap.setCenter(bounds.getCenter());