Popups

Docs / Popups

Overview

The <x-map-popup> component creates standalone popups anchored to specific coordinates on the map. Unlike marker popups, these are not attached to a marker and can be opened independently.

Basic Usage

<x-map :center="[-0.09, 51.505]" :zoom="13">
    <x-map-popup
        :lat="51.505"
        :lng="-0.09"
        :open="true"
    >
        <p>This is a standalone popup.</p>
    </x-map-popup>
</x-map>

With Close Button

Add a close button so users can dismiss the popup:

<x-map-popup
    :lat="40.7128"
    :lng="-74.006"
    :open="true"
    :close-button="true"
    max-width="250px"
>
    <div>
        <h3>New York City</h3>
        <p>The city that never sleeps.</p>
    </div>
</x-map-popup>

Close on Move

Automatically close the popup when the user pans or moves the map:

blade

<x-map-popup
    :lat="51.505"
    :lng="-0.09"
    :open="true"
    :close-on-move="true"
>
    <p>I'll close when you move the map!</p>
</x-map-popup>

Props

Prop	Type	Default	Description
:lat	float	required	Latitude
:lng	float	required	Longitude
id	?string	null	Unique identifier for events
:open	bool	true	Initial visibility
max-width	string	'300px'	CSS max-width (e.g., 'none')
:close-button	bool	false	Show the 'x' close button
:close-on-click-map	bool	true	Close when map is clicked
:close-on-move	bool	false	Close when the map camera moves
anchor	string	'bottom'	Options: top, bottom, left, right, etc.
:offset	array	[0, 0]	Pixel offset [x, y]
class	string	''	Additional CSS classes

Previous ← Markers Next Routes →