Marker

Place a marker at given coordinates. Renders the default pin, or your own content as a custom pin.

Usage

Render <Marker> as a child of <Map>. Pass children to use them as a custom pin; omit them for the default Mapbox marker.

import { Map } from "@/components/ui/map";
import { Marker } from "@/components/ui/marker";

const places = [
  { id: 1, name: "Texas State Capitol", lng: -97.7404, lat: 30.2747 },
  { id: 2, name: "Zilker Park", lng: -97.7713, lat: 30.2669 },
  { id: 3, name: "UT Austin", lng: -97.7394, lat: 30.2862 },
];

export function MarkerExample() {
  return (
    <div className="h-[420px] w-full">
      <Map center={[-97.7503, 30.2759]} zoom={12}>
        {places.map((place) => (
          <Marker key={place.id} lng={place.lng} lat={place.lat}>
            <div className="bg-primary size-4 rounded-full border-2 border-white shadow-lg" />
          </Marker>
        ))}
      </Map>
    </div>
  );
}

Props

PropTypeDefaultDescription
lngnumber—Longitude of the marker.
latnumber—Latitude of the marker.
onClick(marker: mapboxgl.Marker) => void—Called when the marker element is clicked.
childrenReactNode—Custom pin content. A nested <Popup> renders nothing here, so the marker falls back to the default pin.
MapPopup