Markers

Docs / Markers

Overview

The <x-map-marker> component displays interactive markers on the map. Markers support custom colors, labels, tooltips, popups, dragging, and fully custom HTML content.

Basic Marker

<x-map :center="[-0.09, 51.505]" :zoom="13">
    <x-map-marker
        :lat="51.505"
        :lng="-0.09"
        color="#ef4444"
    />
</x-map>

Labels & Tooltips

Add text labels near the marker and hover tooltips using sub-components:

<x-map-marker :lat="51.505" :lng="-0.09" color="#1A56DB">
    <x-marker-label
        text="London Office"
        position="top"
    />
    <x-marker-tooltip
        text="Hover for details"
    />
</x-map-marker>

Custom Marker Content

Replace the default marker pin with completely custom HTML using <x-marker-content>:

<x-map-marker :lat="51.505" :lng="-0.09">
    <x-marker-content>
        <div class="p-2 bg-blue-500 rounded-full">
            <svg>...</svg>
        </div>
    </x-marker-content>
</x-map-marker>

Multiple Markers

Add as many markers as you need, each with their own props:

<x-map :center="[-0.1, 51.51]" :zoom="12">
    <x-map-marker :lat="51.505" :lng="-0.09" color="#ef4444" />
    <x-map-marker :lat="51.515" :lng="-0.1" color="#3b82f6" />
    <x-map-marker :lat="51.51" :lng="-0.12" color="#10b981" />
</x-map>

Props

Prop	Type	Default	Description
:lat	float	required	Latitude
:lng	float	required	Longitude
id	string	UUID	Unique marker identifier
:draggable	bool	false	Allow user to drag marker
color	string	'#1A56DB'	Default dot color
anchor	string	'bottom'	Anchor point (center, bottom, etc.)

Sub-Components

<x-marker-content>

Renders custom HTML as the marker icon. Place any HTML in the slot.

<x-marker-label>

Adds a text label near the marker.

Prop	Description
text	The label text
position	top, bottom, left, right

<x-marker-tooltip>

Adds a hover tooltip using MapLibre's Popup.

Prop	Description
text	The tooltip text

<x-marker-popup>

Adds a click-to-open popup. Supports any HTML in the slot.

Prop	Description
anchor	Where to anchor relative to marker
max-width	CSS max-width for the popup

Previous ← Controls Next Popups →