e8-map
Updated on Sep 18, 2025 2 minutes to readA map component with marker rendering, clustering, and interactive popups.
Overview
e8-map allows displaying an interactive map with markers, automatic clustering, and popups on hover or click.
It supports dynamic marker rendering, grouping, and custom map center configuration. The component is responsive and updates markers in real time when the markers array changes.
<e8-map
ref="map"
:markers="[
{title:'Ajax, ON, Canada',lat:43.850857,long:-79.02037},
{title:'Sudbury, ON, Canada',lat:46.493919,long:-80.995415},
{title:'Mannford, OK, USA',lat:36.133411,long:-96.354454}
]"
>
</e8-map>
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| height | Height of the map container. | string | '30rem' |
| markers | Array of marker objects. | Array<E8MapMarker> | [] |
Events
| Slot | Description |
|---|---|
| on-marker-click | Triggers when the map marker is clicked. |
Events Details
Event: On Marker Click
Triggered when a map marker is clicked.
Receives the clicked marker object (from the provided markers array).
Insert this code into Main or Initialization script of the form to register a global method
E8App.$methods.set('onMapClick', (marker) => {
console.log('mapClick', marker)
});
🔽 Show more
Copy this snippet into the Content section
<e8-map
:markers="[
{title:'Ajax, ON, Canada',lat:43.850857,long:-79.02037},
{title:'Sudbury, ON, Canada',lat:46.493919,long:-80.995415},
{title:'Mannford, OK, USA',lat:36.133411,long:-96.354454}
]"
on-marker-click="onMapClick"
>
</e8-map>
🔽 Show more