Popup

A popup with custom React content. Attaches to a parent Marker, or stands alone at given coordinates.

Usage

Nest <Popup> inside a <Marker> and it attaches automatically — click the marker to toggle it. Click the marker in the example below.

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

export function PopupExample() {
  return (
    <div className="h-[420px] w-full">
      <Map center={[-97.7404, 30.2747]} zoom={14}>
        <Marker lng={-97.7404} lat={30.2747}>
          <Popup>
            <div className="bg-popover text-popover-foreground w-48 rounded-lg border p-3 shadow-md">
              <p className="font-medium">Texas State Capitol</p>
              <p className="text-muted-foreground text-xs">Austin, Texas</p>
            </div>
          </Popup>
        </Marker>
      </Map>
    </div>
  );
}

Props

When used outside a marker, pass lng and lat to anchor the popup directly.

Prop	Type	Default	Description
`lng`	`number`	`—`	Longitude. Ignored when nested inside a <Marker>.
`lat`	`number`	`—`	Latitude. Ignored when nested inside a <Marker>.
`onClose`	`() => void`	`—`	Called when the popup closes.
`children`	`ReactNode`	`—`	Popup content, rendered via a React portal.

Marker Controls