34 lines
1020 B
TypeScript
34 lines
1020 B
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
import { env } from "@/env/server"
|
|
|
|
import { getUrlWithSignature } from "@/utils/map"
|
|
|
|
import { StaticMapProps } from "@/types/components/maps/staticMap"
|
|
|
|
export default function StaticMap({
|
|
city,
|
|
coordinates,
|
|
width,
|
|
height,
|
|
zoomLevel = 14,
|
|
mapType = "roadmap",
|
|
altText,
|
|
}: StaticMapProps) {
|
|
const key = env.GOOGLE_STATIC_MAP_KEY
|
|
const secret = env.GOOGLE_STATIC_MAP_SIGNATURE_SECRET
|
|
const baseUrl = "https://maps.googleapis.com/maps/api/staticmap"
|
|
const center = coordinates ? `${coordinates.lat},${coordinates.lng}` : city
|
|
|
|
if (!center) {
|
|
return null
|
|
}
|
|
|
|
// Google Maps Static API only supports images smaller than 640x640px. Read: https://developers.google.com/maps/documentation/maps-static/start#Largerimagesizes
|
|
const url = new URL(
|
|
`${baseUrl}?center=${center}&zoom=${zoomLevel}&size=${width}x${height}&maptype=${mapType}&key=${key}`
|
|
)
|
|
const src = getUrlWithSignature(url, secret)
|
|
|
|
return <img src={src} alt={altText} />
|
|
}
|