# Markers Place custom SVG elements at specific coordinates on the map. Markers support tooltips and click handlers just like regions. This pattern uses the `markers` prop with an array of `MapMarkerData` objects, each providing coordinates, a label, and custom SVG content. ```tsx 'use client' import { USAMap } from '@/components/shadcnmaps/maps/usa' import type { MapMarkerData } from '@/components/shadcnmaps/types' const CITIES: (Omit & { city: string state: string })[] = [ { id: 'nyc', x: 840, y: 201, city: 'New York', state: 'NY', label: 'New York, NY', }, { id: 'la', x: 83, y: 336, city: 'Los Angeles', state: 'CA', label: 'Los Angeles, CA', }, { id: 'chi', x: 612, y: 215, city: 'Chicago', state: 'IL', label: 'Chicago, IL', }, { id: 'hou', x: 504, y: 483, city: 'Houston', state: 'TX', label: 'Houston, TX', }, { id: 'sea', x: 104, y: 35, city: 'Seattle', state: 'WA', label: 'Seattle, WA', }, ] export default function MarkersExample() { const markers: MapMarkerData[] = CITIES.map( ({ id, x, y, label, city, state }) => ({ id, x, y, label, content: ( ), tooltipContent: (

{city}

{state}

), }) ) return } ```