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/ContentType/DestinationPage/DestinationOverviewPage/index.tsx

@@ -32,7 +32,7 @@ export default async function DestinationOverviewPage() {
         <JumpTo />
       </div>
       <div className={styles.mapContainer}>
-        <Suspense fallback={<SkeletonShimmer width={"100%"} height={"100%"} />}>
+        <Suspense fallback={<SkeletonShimmer width="100%" height="100%" />}>
           <OverviewMapContainer />
         </Suspense>
       </div>
@@ -53,15 +53,15 @@ export function DestinationOverviewPageLoading() {
   return (
     <>
       <div className={styles.mapContainer}>
-        <SkeletonShimmer width={"100%"} height={"100%"} />
+        <SkeletonShimmer width="100%" height="100%" />
       </div>
       <main className={styles.main}>
         <div className={styles.blocks}>
-          <SkeletonShimmer width={"100%"} height={"100%"} />
+          <SkeletonShimmer width="100%" height="100%" />
         </div>
       </main>
       <aside className={styles.hotelsAccordions}>
-        <SkeletonShimmer width={"100%"} height={"100%"} />
+        <SkeletonShimmer width="100%" height="100%" />
       </aside>
     </>
   )

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}>

apps/scandic-web/types/components/hotelPage/map/interactiveMap.ts

@@ -11,6 +11,7 @@ export interface InteractiveMapProps {
   hotelPins?: HotelPin[]
   mapId: string
   closeButton: ReactElement
+  fitBounds?: boolean
   onTilesLoaded?: () => void
   onActivePoiChange?: (poi: PointOfInterest["name"] | null) => void
 }