diff --git a/docs_source/api/marker.md b/docs_source/api/marker.md
index 8de93431..89a7213e 100644
--- a/docs_source/api/marker.md
+++ b/docs_source/api/marker.md
@@ -75,14 +75,62 @@
### `@drag`
- **Description:** Fires when marker dragged if marker `draggable` prop is `true`
-- **Payload** `{ component: MarkerComponent, map: Map, MapEvent: Event }` Object with `Marker` component, parent map and original MapboxGl event
+- **Payload** `{ component: MarkerComponent, map: Map, mapboxEvent: Event }` Object with `Marker` component, parent map and original MapboxGl event
### `@dragstart`
- **Description:** Fires when marker dragging starts if marker `draggable` prop is `true`
-- **Payload** `{ component: MarkerComponent, map: Map, MapEvent: Event }` Object with `Marker` component, parent map and original MapboxGl event
+- **Payload** `{ component: MarkerComponent, map: Map, mapboxEvent: Event }` Object with `Marker` component, parent map and original MapboxGl event
### `@dragend`
- **Description:** Fires when marker dragging ends if marker `draggable` prop is `true`
-- **Payload** `{ component: MarkerComponent, map: Map, MapEvent: Event }` Object with `Marker` component, parent map and original MapboxGl event
+- **Payload** `{ component: MarkerComponent, map: Map, mapboxEvent: Event }` Object with `Marker` component, parent map and original MapboxGl event
+
+### `@click`
+
+- **Description:** Fires marker is clicked.
+- **Payload**
+
+```
+ {
+ component: MarkerComponent,
+ map: Map,
+ mapboxEvent: DOMEvent,
+ marker: Marker
+ }
+```
+
+Object with `Marker` component, parent map and original MapboxGl event
+
+### `@mouseenter`
+
+- **Description:** Fires when mouse cursor enters marker area.
+- **Payload**
+
+```
+ {
+ component: MarkerComponent,
+ map: Map,
+ mapboxEvent: DOMEvent,
+ marker: Marker
+ }
+```
+
+Object with `Marker` component, parent map and original MapboxGl event
+
+### `@mouseleave`
+
+- **Description:** Fires when mouse cursor leaves marker area.
+- **Payload**
+
+```
+ {
+ component: MarkerComponent,
+ map: Map,
+ mapboxEvent: DOMEvent,
+ marker: Marker
+ }
+```
+
+Object with `Marker` component, parent map and original MapboxGl event
diff --git a/src/components/UI/Marker.vue b/src/components/UI/Marker.vue
index 6c78af63..0c22690c 100644
--- a/src/components/UI/Marker.vue
+++ b/src/components/UI/Marker.vue
@@ -17,6 +17,12 @@ const markerEvents = {
dragend: "dragend"
};
+const markerDOMEvents = {
+ click: "click",
+ mouseenter: "mouseenter",
+ mouseleave: "mouseleave"
+};
+
export default {
name: "MapMarker",
mixins: [withEvents, withSelfEvents],
@@ -110,7 +116,7 @@ export default {
methods: {
$_addMarker() {
this.marker.setLngLat(this.coordinates).addTo(this.map);
-
+ this.$_bindMarkerDOMEvents();
this.$_emitEvent("added", { marker: this.marker });
},
@@ -118,6 +124,16 @@ export default {
this.$_emitMapEvent(event, { marker: this.marker });
},
+ $_bindMarkerDOMEvents() {
+ Object.keys(this.$listeners).forEach(key => {
+ if (Object.values(markerDOMEvents).includes(key)) {
+ this.marker._element.addEventListener(key, event => {
+ this.$_emitSelfEvent(event);
+ });
+ }
+ });
+ },
+
remove() {
this.marker.remove();
this.$_emitEvent("removed");