diff --git a/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx b/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx index 07ce2e49d..1f996b786 100644 --- a/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx +++ b/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx @@ -72,13 +72,17 @@ export default function SelectHotelContent({ const hotel = hotels.find((hotel) => hotel.hotel.name === activeHotel) if (hotel && hotel.hotel.location) { - return { - lat: hotel.hotel.location.latitude, - lng: hotel.hotel.location.longitude, - } + return isAboveMobile + ? { + lat: hotel.hotel.location.latitude, + lng: hotel.hotel.location.longitude, + } + : { + lat: hotel.hotel.location.latitude - 0.003, + lng: hotel.hotel.location.longitude, + } } } - return isAboveMobile ? cityCoordinates : { ...cityCoordinates, lat: cityCoordinates.lat - 0.006 } @@ -208,6 +212,7 @@ export default function SelectHotelContent({ hotelPins={filteredHotelPins} mapId={mapId} onTilesLoaded={debouncedUpdateHotelCards} + fitBounds={isAboveMobile || !activeHotel} /> ) diff --git a/apps/scandic-web/components/Maps/InteractiveMap/index.tsx b/apps/scandic-web/components/Maps/InteractiveMap/index.tsx index 682a6cc65..f68205f5f 100644 --- a/apps/scandic-web/components/Maps/InteractiveMap/index.tsx +++ b/apps/scandic-web/components/Maps/InteractiveMap/index.tsx @@ -31,7 +31,7 @@ export default function InteractiveMap({ }: InteractiveMapProps) { const intl = useIntl() const map = useMap() - const [hasFittedBounds, setHasFittedBounds] = useState(false) + const [hasInitializedBounds, setHasInitializedBounds] = useState(false) const mapOptions: MapProps = { defaultZoom: 14, @@ -57,15 +57,18 @@ 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) + if (map && hotelPins?.length && !hasInitializedBounds) { + if (fitBounds) { + const bounds = new google.maps.LatLngBounds() + hotelPins.forEach((marker) => { + bounds.extend(marker.coordinates) + }) + + map.fitBounds(bounds, 100) + } + setHasInitializedBounds(true) } - }, [map, fitBounds, hotelPins, hasFittedBounds]) + }, [map, fitBounds, hotelPins, hasInitializedBounds]) return (