flyer-crawler.projectium.com/src/components/MapView.tsx

// src/components/MapView.tsx
import React from 'react';

interface MapViewProps {
  latitude: number;
  longitude: number;
}

const apiKey = import.meta.env.VITE_GOOGLE_MAPS_EMBED_API_KEY;

export const MapView: React.FC<MapViewProps> = ({ latitude, longitude }) => {
  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}&center=${latitude},${longitude}&zoom=14`;

  return (
    <div className="w-full h-64 rounded-lg overflow-hidden border border-gray-300 dark:border-gray-600">
      <iframe
        width="100%"
        height="100%"
        style={{ border: 0 }}
        loading="lazy"
        allowFullScreen
        src={mapSrc}
      ></iframe>
    </div>
  );
};