36 lines
967 B
TypeScript
36 lines
967 B
TypeScript
// src/components/MapView.tsx
|
|
import React from 'react';
|
|
import config from '../config';
|
|
|
|
interface MapViewProps {
|
|
latitude: number;
|
|
longitude: number;
|
|
}
|
|
|
|
export const MapView: React.FC<MapViewProps> = ({ latitude, longitude }) => {
|
|
// Move config access inside component to allow for dynamic updates during tests/runtime
|
|
const apiKey = config.google.mapsEmbedApiKey;
|
|
|
|
if (!apiKey) {
|
|
return (
|
|
<div className="text-sm text-red-500">Map view is disabled: API key is not configured.</div>
|
|
);
|
|
}
|
|
|
|
const mapSrc = `https://www.google.com/maps/embed/v1/view?key=${apiKey}¢er=${latitude},${longitude}&zoom=14`;
|
|
|
|
return (
|
|
<div className="w-full h-64 rounded-lg overflow-hidden border border-gray-300 dark:border-gray-600">
|
|
<iframe
|
|
title="Map view"
|
|
width="100%"
|
|
height="100%"
|
|
style={{ border: 0 }}
|
|
loading="lazy"
|
|
allowFullScreen
|
|
src={mapSrc}
|
|
></iframe>
|
|
</div>
|
|
);
|
|
};
|