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	null	Unique identifier for events
:draggable	bool	false	Enable user to drag the marker
color	string	'#1A56DB'	Color for the default marker pin
anchor	string	'bottom'	Options: center, top, bottom, etc.
:offset	array	[0, 0]	Pixel offset [x, y]
:rotation	float	0	Clockwise rotation in degrees
rotation-alignment	string	'auto'	'map', 'viewport', or 'auto'
pitch-alignment	string	'auto'	'map', 'viewport', or 'auto'
class	string	''	CSS class for the marker container

Sub-Components

<x-marker-content>

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

Prop	Description
class	CSS class for the wrapper element

<x-marker-label>

Adds a floating text label to the marker.

Prop	Description
text	Label text content
position	Options: top, bottom, left, right (Default: bottom)
class	Additional CSS classes

<x-marker-tooltip>

Adds a hover-triggered tooltip popup.

Prop	Description
text	Tooltip text content
anchor	Corner connection point
:offset	Pixel offset [x, y]
class	CSS class for the tooltip wrapper

<x-marker-popup>

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

Prop	Description
max-width	CSS max-width (Default: '300px')
:close-button	Toggle the little 'x' (Default: true)
:close-on-click-map	Close if map is clicked (Default: true)
:close-on-move	Close if map camera moves (Default: false)
anchor	Popup connection point (Default: bottom)
:offset	Pixel offset [x, y] (Default: [0, 0])
class	CSS base class for the popup container

Previous ← Controls Next Popups →