fix: Adds logic for recentering map; changes PDE compact to weekly. (#445)

Author: willum070

samples/ui-kit-place-details-compact/index.html

@@ -35,7 +35,7 @@
     </gmp-map>
     <!--[END maps_ui_kit_place_details_compact_container]-->
     <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))})
-        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta"});</script>
+        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
   </body>
 </html>
 <!--[END maps_ui_kit_place_details_compact] -->

samples/ui-kit-place-details/index.ts

@@ -23,13 +23,21 @@ async function initMap(): Promise<void> {
   // Hide the map type control.
   map.innerMap.setOptions({mapTypeControl: false});
 
+  // Function to update map and marker based on place details
+  const updateMapAndMarker = () => {
+    if (placeDetails.place && placeDetails.place.location) {
+      let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005);
+      map.innerMap.panTo(adjustedCenter);
+      map.innerMap.setZoom(16); // Set zoom after panning if needed
+      marker.position = placeDetails.place.location;
+      marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
+      marker.style.display = 'block';
+    }
+  };
+
   // Set up map once widget is loaded.
   placeDetails.addEventListener('gmp-load', (event) => {
-    map.innerMap.panTo(placeDetails.place.location);
-    map.innerMap.setZoom(16); // Set zoom after panning if needed
-    marker.position = placeDetails.place.location;
-    marker.style.display = 'block';
-    marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
+    updateMapAndMarker();
   });
 
   /* [START maps_ui_kit_place_details_event] */
@@ -40,18 +48,21 @@ async function initMap(): Promise<void> {
     if (event.placeId) {
       // Fire when the user clicks a POI.
       placeDetailsRequest.place = event.placeId;
+      updateMapAndMarker();
     } else {
       // Fire when the user clicks the map (not on a POI).
       console.log('No place was selected.');
+      marker.style.display = 'none';
     }
-
-    // Show the marker at the selected place.
-    marker.position = placeDetails.place.location;
-    marker.style.display = 'block';
-    marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
   });
 }
 /* [END maps_ui_kit_place_details_event] */
 
+// Helper function to offset marker placement for better visual appearance.
+function offsetLatLngRight(latLng, longitudeOffset) {
+  const newLng = latLng.lng() + longitudeOffset;
+  return new google.maps.LatLng(latLng.lat(), newLng);
+}
+
 initMap();
 /* [END maps_ui_kit_place_details] */