Components
Loading preview...
DOM-based map markers with custom content, tooltips, popups, and draggable marker support.
npx shadcn@latest add https://21st.dev/r/mapcn/mapcn-map-marker"use client";
import { Map, MapMarker, MarkerContent, MarkerPopup, MarkerTooltip } from "@/components/ui/mapcn-map-marker";
const locations = [
{ id: 1, name: "Empire State Building", lng: -73.9857, lat: 40.7484 },
{ id: 2, name: "Central Park", lng: -73.9654, lat: 40.7829 },
{ id: 3, name: "Times Square", lng: -73.9855, lat: 40.758 },
];
export default function MapMarkerDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<div className="h-[420px] w-full max-w-4xl overflow-hidden rounded-lg border bg-background shadow-sm">
<Map center={[-73.98, 40.76]} zoom={12}>
{locations.map((location) => (
<MapMarker key={location.id} longitude={location.lng} latitude={location.lat}>
<MarkerContent>
<div data-mapcn-marker={location.name} className="bg-primary size-4 rounded-full border-2 border-white shadow-lg" />
</MarkerContent>
<MarkerTooltip>{location.name}</MarkerTooltip>
<MarkerPopup>
<div className="space-y-1">
<p className="text-foreground font-medium">{location.name}</p>
<p className="text-muted-foreground text-xs">
{location.lat.toFixed(4)}, {location.lng.toFixed(4)}
</p>
</div>
</MarkerPopup>
</MapMarker>
))}
</Map>
</div>
</div>
);
}
export { MapMarkerDemo };