diff --git a/.env.local.example b/.env.local.example
index 6d6af70cc..c747c3e1e 100644
--- a/.env.local.example
+++ b/.env.local.example
@@ -46,3 +46,5 @@ NEXTAUTH_URL="$PUBLIC_URL/api/web/auth"
GOOGLE_STATIC_MAP_KEY=""
GOOGLE_STATIC_MAP_SIGNATURE_SECRET=""
+GOOGLE_STATIC_MAP_ID=""
+GOOGLE_DYNAMIC_MAP_ID=""
diff --git a/.env.test b/.env.test
index 801c4336b..d2b538cc2 100644
--- a/.env.test
+++ b/.env.test
@@ -37,3 +37,7 @@ SEAMLESS_LOGOUT_NO="test"
SEAMLESS_LOGOUT_SV="test"
WEBVIEW_ENCRYPTION_KEY="test"
BOOKING_ENCRYPTION_KEY="test"
+GOOGLE_STATIC_MAP_KEY="test"
+GOOGLE_STATIC_MAP_SIGNATURE_SECRET="test"
+GOOGLE_STATIC_MAP_ID="test"
+GOOGLE_DYNAMIC_MAP_ID="test"
diff --git a/components/ContentType/HotelPage/Map/DynamicMap/Map/index.tsx b/components/ContentType/HotelPage/Map/DynamicMap/Map/index.tsx
index 196baff83..a049e90c4 100644
--- a/components/ContentType/HotelPage/Map/DynamicMap/Map/index.tsx
+++ b/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() {
diff --git a/components/ContentType/HotelPage/Map/DynamicMap/index.tsx b/components/ContentType/HotelPage/Map/DynamicMap/index.tsx
index 28cf8cc9b..785949be5 100644
--- a/components/ContentType/HotelPage/Map/DynamicMap/index.tsx
+++ b/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}
/>
diff --git a/components/ContentType/HotelPage/Map/StaticMap/index.tsx b/components/ContentType/HotelPage/Map/StaticMap/index.tsx
index 4a070c29c..4c9ebe04a 100644
--- a/components/ContentType/HotelPage/Map/StaticMap/index.tsx
+++ b/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}
/>
>
) : null}
diff --git a/components/Maps/Markers/Poi/index.tsx b/components/Maps/Markers/Poi/index.tsx
index b98e5c1cb..db67af80b 100644
--- a/components/Maps/Markers/Poi/index.tsx
+++ b/components/Maps/Markers/Poi/index.tsx
@@ -3,7 +3,7 @@ import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
import { getCategoryIconName } from "../utils"
import { poiVariants } from "./variants"
-import { PoiMarkerProps } from "@/types/components/maps/poiMarker"
+import type { PoiMarkerProps } from "@/types/components/maps/poiMarker"
export default function PoiMarker({
category,
diff --git a/components/Maps/Markers/utils.ts b/components/Maps/Markers/utils.ts
index 934df976b..bf3e5ec38 100644
--- a/components/Maps/Markers/utils.ts
+++ b/components/Maps/Markers/utils.ts
@@ -1,5 +1,5 @@
import { IconName } from "@/types/components/icon"
-import { PointOfInterestCategory } from "@/types/hotel"
+import type { PointOfInterestCategory } from "@/types/hotel"
/* 2024-09-18: At the moment, the icons for the different categories is unknown.
This will be handled later. */
diff --git a/components/Maps/StaticMap/index.tsx b/components/Maps/StaticMap/index.tsx
index 170865c0a..52f7dd7b3 100644
--- a/components/Maps/StaticMap/index.tsx
+++ b/components/Maps/StaticMap/index.tsx
@@ -13,6 +13,7 @@ export default function StaticMap({
zoomLevel = 14,
mapType = "roadmap",
altText,
+ mapId,
}: StaticMapProps) {
const key = env.GOOGLE_STATIC_MAP_KEY
const secret = env.GOOGLE_STATIC_MAP_SIGNATURE_SECRET
@@ -27,6 +28,11 @@ export default function StaticMap({
const url = new URL(
`${baseUrl}?center=${center}&zoom=${zoomLevel}&size=${width}x${height}&maptype=${mapType}&key=${key}`
)
+
+ if (mapId) {
+ url.searchParams.append("map_id", mapId)
+ }
+
const src = getUrlWithSignature(url, secret)
return
diff --git a/env/server.ts b/env/server.ts
index 58f98067b..663de1ad1 100644
--- a/env/server.ts
+++ b/env/server.ts
@@ -61,8 +61,10 @@ export const env = createEnv({
SEAMLESS_LOGOUT_SV: z.string(),
WEBVIEW_ENCRYPTION_KEY: z.string(),
BOOKING_ENCRYPTION_KEY: z.string(),
- GOOGLE_STATIC_MAP_KEY: z.string().optional(),
- GOOGLE_STATIC_MAP_SIGNATURE_SECRET: z.string().optional(),
+ GOOGLE_STATIC_MAP_KEY: z.string(),
+ GOOGLE_STATIC_MAP_SIGNATURE_SECRET: z.string(),
+ GOOGLE_DYNAMIC_MAP_ID: z.string(),
+ GOOGLE_STATIC_MAP_ID: z.string(),
},
emptyStringAsUndefined: true,
runtimeEnv: {
@@ -113,5 +115,7 @@ export const env = createEnv({
GOOGLE_STATIC_MAP_KEY: process.env.GOOGLE_STATIC_MAP_KEY,
GOOGLE_STATIC_MAP_SIGNATURE_SECRET:
process.env.GOOGLE_STATIC_MAP_SIGNATURE_SECRET,
+ GOOGLE_STATIC_MAP_ID: process.env.GOOGLE_STATIC_MAP_ID,
+ GOOGLE_DYNAMIC_MAP_ID: process.env.GOOGLE_DYNAMIC_MAP_ID,
},
})
diff --git a/types/components/hotelPage/map/dynamicMap.ts b/types/components/hotelPage/map/dynamicMap.ts
index 97803b424..7b8595cc9 100644
--- a/types/components/hotelPage/map/dynamicMap.ts
+++ b/types/components/hotelPage/map/dynamicMap.ts
@@ -6,4 +6,5 @@ export interface DynamicMapProps {
hotelName: string
coordinates: Coordinates
pointsOfInterest: PointOfInterest[]
+ mapId: string
}
diff --git a/types/components/hotelPage/map/mapCard.ts b/types/components/hotelPage/map/mapCard.ts
index d09b23833..1ead43544 100644
--- a/types/components/hotelPage/map/mapCard.ts
+++ b/types/components/hotelPage/map/mapCard.ts
@@ -1,4 +1,4 @@
-import { PointOfInterest } from "@/types/hotel"
+import type { PointOfInterest } from "@/types/hotel"
export interface MapCardProps {
hotelName: string
diff --git a/types/components/hotelPage/map/mapContent.ts b/types/components/hotelPage/map/mapContent.ts
index cc484d081..98e7b4c81 100644
--- a/types/components/hotelPage/map/mapContent.ts
+++ b/types/components/hotelPage/map/mapContent.ts
@@ -1,9 +1,10 @@
-import { PointOfInterest } from "@/types/hotel"
-import type { Coordinates } from "../../maps/coordinates"
+import type { Coordinates } from "@/types/components/maps/coordinates"
+import type { PointOfInterest } from "@/types/hotel"
export interface MapContentProps {
coordinates: Coordinates
pointsOfInterest: PointOfInterest[]
activePoi: PointOfInterest["name"] | null
+ mapId: string
onActivePoiChange: (poi: PointOfInterest["name"] | null) => void
}
diff --git a/types/components/hotelPage/map/sidebar.ts b/types/components/hotelPage/map/sidebar.ts
index 070ab5dd3..6bde9f7dc 100644
--- a/types/components/hotelPage/map/sidebar.ts
+++ b/types/components/hotelPage/map/sidebar.ts
@@ -1,4 +1,4 @@
-import { PointOfInterest } from "@/types/hotel"
+import type { PointOfInterest } from "@/types/hotel"
export interface SidebarProps {
hotelName: string
diff --git a/types/components/hotelPage/roomCard.ts b/types/components/hotelPage/roomCard.ts
index 4a555c621..4d07f170c 100644
--- a/types/components/hotelPage/roomCard.ts
+++ b/types/components/hotelPage/roomCard.ts
@@ -1,4 +1,4 @@
-import { RoomData } from "@/types/hotel"
+import type { RoomData } from "@/types/hotel"
export interface RoomCardProps {
id: string
diff --git a/types/components/maps/poiMarker.ts b/types/components/maps/poiMarker.ts
index 01a5669be..89932fb51 100644
--- a/types/components/maps/poiMarker.ts
+++ b/types/components/maps/poiMarker.ts
@@ -1,7 +1,7 @@
-import { VariantProps } from "class-variance-authority"
-
import { poiVariants } from "@/components/Maps/Markers/Poi/variants"
+import type { VariantProps } from "class-variance-authority"
+
export interface PoiMarkerProps extends VariantProps {
size?: number
className?: string
diff --git a/types/components/maps/staticMap.ts b/types/components/maps/staticMap.ts
index 40a73776c..8519f4101 100644
--- a/types/components/maps/staticMap.ts
+++ b/types/components/maps/staticMap.ts
@@ -1,4 +1,4 @@
-import { Coordinates } from "./coordinates"
+import type { Coordinates } from "./coordinates"
export type StaticMapProps = {
city?: string
@@ -8,4 +8,5 @@ export type StaticMapProps = {
zoomLevel?: number
mapType?: "roadmap" | "satellite" | "terrain" | "hybrid"
altText: string
+ mapId?: string
}