Merged in fix/SW-2017-destination-pages-map-fix-zooming-issues (pull request #1634)

fix(SW-2017): fit bounds on first load

* fix(SW-2017): fit bounds on first load

* fix(SW-2017): rebase


Approved-by: Michael Zetterberg
Approved-by: Erik Tiekstra

apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx

@@ -4,7 +4,7 @@ import "client-only"
 
 import { Map, type MapProps, useMap } from "@vis.gl/react-google-maps"
 import { cx } from "class-variance-authority"
-import { type PropsWithChildren, useEffect, useRef } from "react"
+import { type PropsWithChildren, useEffect, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
@@ -51,6 +51,7 @@ export default function DynamicMap({
   const pageType = usePageType()
   const { activeMarker } = useDestinationPageHotelsMapStore()
   const ref = useRef<HTMLDivElement>(null)
+  const [hasFittedBounds, setHasFittedBounds] = useState(false)
 
   useEffect(() => {
     if (ref.current && activeMarker && pageType === "overview") {
@@ -62,14 +63,15 @@ export default function DynamicMap({
   }, [activeMarker, pageType])
 
   useEffect(() => {
-    if (map && fitBounds && markers?.length) {
+    if (map && fitBounds && markers?.length && !hasFittedBounds) {
       const bounds = new google.maps.LatLngBounds()
       markers.forEach((marker) => {
         bounds.extend(marker.coordinates)
       })
       map.fitBounds(bounds, 100)
+      setHasFittedBounds(true)
     }
-  }, [map, fitBounds, markers])
+  }, [map, fitBounds, markers, hasFittedBounds])
 
   useHandleKeyUp((event: KeyboardEvent) => {
     if (event.key === "Escape" && onClose) {

apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx

@@ -49,7 +49,8 @@ export default function Map({
 }: PropsWithChildren<MapProps>) {
   const router = useRouter()
   const searchParams = useSearchParams()
-  const { activeMarker: activeHotelId } = useDestinationPageHotelsMapStore()
+  const { activeMarker: activeHotelId, setActiveMarker } =
+    useDestinationPageHotelsMapStore()
   const isMapView = useMemo(
     () => searchParams.get("view") === "map",
     [searchParams]
@@ -132,6 +133,7 @@ export default function Map({
     const url = new URL(window.location.href)
     url.searchParams.delete("view")
     router.push(url.toString())
+    setActiveMarker(null)
   }
 
   return (