From 51a0855fc1216974a3b83982cb61c6c1fcd7d48b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Mon, 14 Apr 2025 07:48:38 +0000
Subject: [PATCH] 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
---
 .../DestinationOverviewPage/index.tsx             |  8 ++++----
 .../components/Maps/InteractiveMap/index.tsx      | 15 +++++++++++++++
 .../components/hotelPage/map/interactiveMap.ts    |  1 +
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/index.tsx
index b6f7ba336..498107cc0 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/index.tsx
+++ b/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>
     </>
   )
diff --git a/apps/scandic-web/components/Maps/InteractiveMap/index.tsx b/apps/scandic-web/components/Maps/InteractiveMap/index.tsx
index 4047fa32b..4d9779397 100644
--- a/apps/scandic-web/components/Maps/InteractiveMap/index.tsx
+++ b/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}>
diff --git a/apps/scandic-web/types/components/hotelPage/map/interactiveMap.ts b/apps/scandic-web/types/components/hotelPage/map/interactiveMap.ts
index 2c337da43..5b56392d4 100644
--- a/apps/scandic-web/types/components/hotelPage/map/interactiveMap.ts
+++ b/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
 }