fix(SW-2378): Added restriction to the map options to avoid showing grey area in the map

Approved-by: Christian Andolf

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 (

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() {

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 },
+}