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 155385e09..4a9858371 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx @@ -9,6 +9,7 @@ import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { MAP_RESTRICTIONS } from "@/constants/map" import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map" import ErrorBoundary from "@/components/ErrorBoundary/ErrorBoundary" @@ -103,6 +104,7 @@ export default function DynamicMap({ clickableIcons: false, gestureHandling, mapId, + restriction: MAP_RESTRICTIONS, } return ( diff --git a/apps/scandic-web/components/Maps/InteractiveMap/index.tsx b/apps/scandic-web/components/Maps/InteractiveMap/index.tsx index 7f57a5ab3..682a6cc65 100644 --- a/apps/scandic-web/components/Maps/InteractiveMap/index.tsx +++ b/apps/scandic-web/components/Maps/InteractiveMap/index.tsx @@ -6,6 +6,8 @@ import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { MAP_RESTRICTIONS } from "@/constants/map" + import Button from "@/components/TempDesignSystem/Button" import HotelListingMapContent from "./HotelListingMapContent" @@ -38,6 +40,7 @@ export default function InteractiveMap({ clickableIcons: false, mapId, gestureHandling: "greedy", + restriction: MAP_RESTRICTIONS, } function zoomIn() { diff --git a/apps/scandic-web/constants/map.ts b/apps/scandic-web/constants/map.ts new file mode 100644 index 000000000..7fec60287 --- /dev/null +++ b/apps/scandic-web/constants/map.ts @@ -0,0 +1,5 @@ +export const MAP_RESTRICTIONS = { + // Restrict the map to the entire world, this avoids showing a grey area. + // See https://developers.google.com/maps/documentation/javascript/reference/map#MapRestriction.latLngBounds + latLngBounds: { north: 85, south: -85, west: -180, east: 180 }, +}