Merged in feat/SW-2181-adapt-map-zooming (pull request #1781)

fix(SW-2181): use fitted bounds to adapt the zooming of the map

* fix(SW-2181): use fitted bounds to adapt the zooming of the map


Approved-by: Michael Zetterberg

apps/scandic-web/components/Maps/InteractiveMap/index.tsx

@@ -1,5 +1,7 @@
 "use client"
+
 import { Map, type MapProps, useMap } from "@vis.gl/react-google-maps"
+import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -20,11 +22,13 @@ export default function InteractiveMap({
   hotelPins,
   mapId,
   closeButton,
+  fitBounds = true,
   onTilesLoaded,
   onActivePoiChange,
 }: InteractiveMapProps) {
   const intl = useIntl()
   const map = useMap()
+  const [hasFittedBounds, setHasFittedBounds] = useState(false)
 
   const mapOptions: MapProps = {
     defaultZoom: 14,
@@ -47,6 +51,17 @@ export default function InteractiveMap({
     }
   }
 
+  useEffect(() => {
+    if (map && fitBounds && hotelPins?.length && !hasFittedBounds) {
+      const bounds = new google.maps.LatLngBounds()
+      hotelPins.forEach((marker) => {
+        bounds.extend(marker.coordinates)
+      })
+      map.fitBounds(bounds, 100)
+      setHasFittedBounds(true)
+    }
+  }, [map, fitBounds, hotelPins, hasFittedBounds])
+
   return (
     <div className={styles.mapContainer}>
       <Map {...mapOptions} onTilesLoaded={onTilesLoaded}>