Map Marker

Defines a single marker point within a Map container. Markers can be positioned by geographic coordinates or by street address.

Properties

Property	Type	Default	Description
mode	select	'coordinates'	How the marker position is determined. Either coordinates (lat/lng) or address (geocoded at runtime).
lat	text	''	Latitude value. Used when mode is coordinates. Supports expressions like {{row.lat}}.
lng	text	''	Longitude value. Used when mode is coordinates. Supports expressions like {{row.lng}}.
address	text	''	Street address. Used when mode is address. Supports expressions like {{row.address}}.
popup	text	''	Content shown when the marker is clicked. Supports expressions like {{row.name}}.

Marker Modes

Coordinates

Set mode to coordinates and provide lat and lng values. This is the most reliable and fastest mode since no geocoding request is needed.

mode: coordinates
lat: 48.8566
lng: 2.3522
popup: Eiffel Tower

Address

Set mode to address and provide an address string. The address is geocoded in the browser at render time using either Nominatim (free, default) or Google Geocoding (if the parent Map has an apiKey).

mode: address
address: 1600 Pennsylvania Ave NW, Washington, DC
popup: The White House

Expression Examples

When used inside a Repeater, marker props can reference data row fields:

mode: coordinates
lat: {{row.latitude}}
lng: {{row.longitude}}
popup: <strong>{{row.name}}</strong><br>{{row.city}}

Address mode with expressions:

mode: address
address: {{row.street}}, {{row.city}}, {{row.country}}
popup: {{row.store_name}}

Tips

• Map Marker widgets must be placed inside a Map widget (directly or inside a Repeater within a Map).
• When using address mode with many markers, consider switching to coordinates mode to avoid geocoding rate limits.
• The popup property supports HTML for rich formatting.
• See also: Map