diff --git a/samples/ui-kit-place-search/index.ts b/samples/ui-kit-place-search/index.ts
index f71fe30c..09e462d8 100644
--- a/samples/ui-kit-place-search/index.ts
+++ b/samples/ui-kit-place-search/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/samples/ui-kit-place-search/style.css b/samples/ui-kit-place-search/style.css
index d432723d..90b4c949 100644
--- a/samples/ui-kit-place-search/style.css
+++ b/samples/ui-kit-place-search/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;
}