diff --git a/apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx index 42e46e0c6..7aa5cb07a 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx +++ b/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(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) { diff --git a/apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx index 5c59a4b7e..d4bef58bb 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx @@ -49,7 +49,8 @@ export default function Map({ }: PropsWithChildren) { 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 (