MarkerPopup

"use client";

import {
  Map,
  MapMarker,
  MarkerContent,
  MarkerPopup,
} from "@/components/ui/mapcn-marker-popup";

const settings = {
  longitude: -122.4194,
  latitude: 37.7749,
  zoom: 11,
  showPopup: true,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };

  return (
    <div className="h-screen w-screen">
      <Map
        viewport={{
          center: [s.longitude, s.latitude],
          zoom: s.zoom,
        }}
        onViewportChange={() => {}}
      >
        <MapMarker longitude={s.longitude} latitude={s.latitude}>
          <MarkerContent />
          {s.showPopup && (
            <MarkerPopup closeButton>
              <div className="space-y-1">
                <p className="text-sm font-medium">San Francisco</p>
                <p className="text-muted-foreground text-xs">
                  California, United States
                </p>
              </div>
            </MarkerPopup>
          )}
        </MapMarker>
      </Map>
    </div>
  );
}