> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/llms.txt)
# Listen for click and hover events on a Marker
This example demonstrates how to listen for user interaction events on a [`Marker`](https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker). Unlike map features, markers are not part of the map canvas, so you cannot use Mapbox GL JS event handlers like `map.on('click', ...)` to interact with them.
Instead, you must use standard JavaScript event listeners on the marker's HTML element. Use [`marker.getElement()`](https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker#getelement) to get a reference to the marker's DOM element, then attach event listeners for `click`, `mouseenter`, `mouseleave`, or other DOM events.
> Example code:
**JavaScript**
```html
Listen for click and hover events on a Marker
Hover or click the marker
```
**React**
```jsx
import React, { useRef, useEffect, useState } from 'react';
import * as mapboxgl from 'mapbox-gl/esm';
const MapboxExample = () => {
const mapContainer = useRef(null);
const map = useRef(null);
const marker = useRef(null);
const [eventMessage, setEventMessage] = useState('Hover or click the marker');
const resetTimeout = useRef(null);
// Venice, Italy coordinates
const veniceCoordinates = [12.3345, 45.4408];
useEffect(() => {
map.current = new mapboxgl.Map({
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
container: mapContainer.current,
style: 'mapbox://styles/mapbox/standard',
center: veniceCoordinates,
zoom: 12
});
// mapboxgl.Marker creates an SVG marker element positioned at the given coordinates
// you must use imperative JavaScript to add event listeners to the marker's element
marker.current = new mapboxgl.Marker()
.setLngLat(veniceCoordinates)
.addTo(map.current);
// Get the marker's HTML element
const markerElement = marker.current.getElement();
// Add mouseenter event listener
const handleMouseEnter = () => {
markerElement.style.cursor = 'pointer';
setEventMessage('Marker is hovered!');
// Clear any pending reset
if (resetTimeout.current) {
clearTimeout(resetTimeout.current);
}
};
// Add mouseleave event listener
const handleMouseLeave = () => {
markerElement.style.cursor = '';
// Only reset if not in clicked state
setEventMessage((current) => {
if (current === 'Marker is hovered!') {
return 'Hover or click the marker';
}
return current;
});
};
// Add click event listener
const handleClick = () => {
setEventMessage('You clicked the marker!');
// Reset to original message after 3 seconds
if (resetTimeout.current) {
clearTimeout(resetTimeout.current);
}
resetTimeout.current = setTimeout(() => {
setEventMessage('Hover or click the marker');
}, 3000);
};
markerElement.addEventListener('mouseenter', handleMouseEnter);
markerElement.addEventListener('mouseleave', handleMouseLeave);
markerElement.addEventListener('click', handleClick);
// Cleanup
return () => {
markerElement.removeEventListener('mouseenter', handleMouseEnter);
markerElement.removeEventListener('mouseleave', handleMouseLeave);
markerElement.removeEventListener('click', handleClick);
if (resetTimeout.current) {
clearTimeout(resetTimeout.current);
}
marker.current.remove();
map.current.remove();
};
}, []);
return (
<>