fix: Fixes centering the map on the selected marker. (#281)

willum070 · web-flow · commit c24c38ce6a01 · 2025-04-04T11:10:58.000-07:00
diff --git a/samples/ui-kit-place-search/index.html b/samples/ui-kit-place-search/index.html
@@ -13,7 +13,6 @@
     <script type="module" src="./index.js"></script>
   </head>
   <body>
-    <h1>Place List Nearby Search with Google Maps</h1>
     <!--[START maps_ui_kit_place_search_map] -->
     <gmp-map center="-37.813,144.963" zoom="10" map-id="DEMO_MAP_ID">
       <div class="overlay" slot="control-inline-start-block-start">
diff --git a/samples/ui-kit-place-search/index.ts b/samples/ui-kit-place-search/index.ts
@@ -12,22 +12,24 @@ 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<void>  {
     await google.maps.importLibrary("places");
     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<void>  {
     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<void>  {
                 ),
                 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
@@ -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;
   }

Original file line number	Diff line number	Diff line change
`@@ -24,9 +24,12 @@ html,`
`24`	`24`	`gmp-map {`
`25`	`25`	`box-sizing: border-box;`
`26`	`26`	`padding: 0 20px 20px;`
	`27`	`+ height: 600px;`
`27`	`28`	`}`
`28`	`29`
`29`	`30`	`.overlay {`
	`31`	`+ position: relative;`
	`32`	`+ top: 40px;`
`30`	`33`	`margin: 20px;`
`31`	`34`	`width: 400px;`
`32`	`35`	`}`
`@@ -55,7 +58,7 @@ html,`
`55`	`58`	`}`
`56`	`59`
`57`	`60`	`.list-container {`
`58`		`- height: 600px;`
	`61`	`+ height: 400px;`
`59`	`62`	`overflow: auto;`
`60`	`63`	`border-radius: 10px;`
`61`	`64`	`}`