feat(SW-325): added mapId as environment variables

components/ContentType/HotelPage/Map/DynamicMap/Map/index.tsx

@@ -26,6 +26,7 @@ export default function MapContent({
   coordinates,
   pointsOfInterest,
   activePoi,
+  mapId,
   onActivePoiChange,
 }: MapContentProps) {
   const intl = useIntl()
@@ -37,7 +38,7 @@ export default function MapContent({
     defaultCenter: coordinates,
     disableDefaultUI: true,
     clickableIcons: false,
-    mapId: "6b48ef228325ae84",
+    mapId,
   }
 
   function zoomIn() {

components/ContentType/HotelPage/Map/DynamicMap/index.tsx

@@ -20,6 +20,7 @@ export default function DynamicMap({
   hotelName,
   coordinates,
   pointsOfInterest,
+  mapId,
 }: DynamicMapProps) {
   const intl = useIntl()
   const { isDynamicMapOpen, closeDynamicMap } = useHotelPageStore()
@@ -72,6 +73,7 @@ export default function DynamicMap({
             pointsOfInterest={pointsOfInterest}
             activePoi={activePoi}
             onActivePoiChange={setActivePoi}
+            mapId={mapId}
           />
         </Dialog>
       </Modal>

components/ContentType/HotelPage/Map/StaticMap/index.tsx

@@ -1,5 +1,7 @@
 /* eslint-disable @next/next/no-img-element */
 
+import { env } from "@/env/server"
+
 import ScandicMarker from "@/components/Maps/Markers/Scandic"
 import StaticMapComp from "@/components/Maps/StaticMap"
 import { getIntl } from "@/i18n"
@@ -15,6 +17,7 @@ export default async function StaticMap({
   zoomLevel = 14,
 }: StaticMapProps) {
   const intl = await getIntl()
+  const mapId = env.GOOGLE_STATIC_MAP_ID
   const mapHeight = 785
   const markerHeight = 100
   const mapLatitudeInPx = mapHeight * 0.2
@@ -31,6 +34,7 @@ export default async function StaticMap({
         height={mapHeight}
         zoomLevel={zoomLevel}
         altText={intl.formatMessage({ id: "Map of HOTEL_NAME" }, { hotelName })}
+        mapId={mapId}
       />
       <ScandicMarker
         className={styles.mapMarker}

components/ContentType/HotelPage/index.tsx

@@ -23,9 +23,10 @@ import TabNavigation from "./TabNavigation"
 import styles from "./hotelPage.module.css"
 
 export default async function HotelPage() {
-  const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
   const intl = await getIntl()
   const lang = getLang()
+  const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
+  const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
   const hotelData = await serverClient().hotel.get({
     include: ["RoomCategories"],
   })
@@ -132,6 +133,7 @@ export default async function HotelPage() {
             hotelName={hotelName}
             coordinates={coordinates}
             pointsOfInterest={pointsOfInterest}
+            mapId={googleMapId}
           />
         </>
       ) : null}