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>

Rich Label & Tooltip Content

Omit the text prop on <x-marker-label> or <x-marker-tooltip> and put any HTML in the slot instead:

<x-map-marker :lat="51.505" :lng="-0.09" color="#10b981">
    <x-marker-label position="top">
        <span class="dot"></span> Open now
    </x-marker-label>
    <x-marker-tooltip>
        <strong>Borough Market</strong><br>
        <span>Mon to Sat, 10:00 to 17:00</span>
    </x-marker-tooltip>
</x-map-marker>

Marker Popup

Add a click-to-open popup to a marker with custom HTML content. By default the popup has no fixed anchor: MapLibre places it on the side with the most room, 16px above the marker. Pass anchor (e.g. "bottom") to pin it to one side:

<x-map-marker :lat="51.505" :lng="-0.09" color="#ef4444">
    <x-marker-popup>
        <h3>Our HQ</h3>
        <p>Visit us anytime!</p>
    </x-marker-popup>
</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. Use :opacity to fade a marker (the green one below is at 0.5):

<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" :opacity="0.5" />
</x-map>

Reactive Markers

Markers inside <x-map> update reactively from Livewire state. When a property changes, markers are added, moved, updated or removed without re-creating the map, so you do not need a wire:ignore wrapper. Give each marker rendered in a loop a stable wire:key:

class StoreMap extends Component
{
    public array $stores = [
        ['id' => 1, 'name' => 'Soho', 'lat' => 51.513, 'lng' => -0.136],
        ['id' => 2, 'name' => 'Camden', 'lat' => 51.539, 'lng' => -0.142],
    ];

    public function addStore(float $lat, float $lng): void
    {
        $this->stores[] = ['id' => uniqid(), 'name' => 'New store', 'lat' => $lat, 'lng' => $lng];
    }
}

<x-map :center="[-0.14, 51.52]" :zoom="12">
    @foreach ($stores as $store)
        <x-map-marker
            wire:key="store-{{ $store['id'] }}"
            :lat="$store['lat']"
            :lng="$store['lng']"
        >
            <x-marker-label :text="$store['name']" />
        </x-map-marker>
    @endforeach
</x-map>

Props

Sub-Components

<x-marker-content>

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

<x-marker-label>

Adds a floating label to the marker. Use text for plain text, or omit it and use the slot for rich content.

<x-marker-tooltip>

Adds a hover-triggered tooltip. Use text for plain text, or omit it and use the slot for rich content.

<x-marker-popup>

Adds a click-to-open popup containing arbitrary HTML.