Custom marker onclick does not work

[EldinHb]

I cant get onClick to work on a Marker with children.

<Marker 
	onClick={() => console.log('marker')}
	key={route.journeyNumber} 
	anchor={[Number.parseFloat(route.latLon.latitude), Number.parseFloat(route.latLon.longitude)]}>
		<div onClick={() => console.log('marker child')} className='bg-white'>
			custom icon
		</div>
</Marker>

Neither marker or marker children gets logged. If I remove the children then onClick works on the marker. What am I doing wrong?

[EnriqueRBT]

Same here

[EnriqueRBT]

Well, I solved forking and modifing Marker.tsx:

[santaclawn]

Same issue here. To get around it, I used the Overlay component, instead of the Marker, and setted the onClick function to my custom icon, which is a image, like so:

<Overlay anchor={location}> <img className="image-marker" src={imageMarker} alt="ImageMarker" onClick={() => handleClick(stuff)} /> </Overlay>

I had to offset the image a bit, but when zooming in or out, it had a better behavior then the actual Marker.

[shailesh-ss-19-11]

any solution ?

[SergGrey1992]

I faced a similar issue and resolved it by adding a custom style to the marker. This ensures that click events are handled correctly.

Here’s the CSS for the marker:

`.marker {
pointer-events: auto;

& > svg {
pointer-events: auto;
}
}
`

And here’s the component with the Marker:
`<Marker
className={styles.marker}
width={44}
key={item.id}
anchor={[item.coordX, item.coordY]}
onClick={() => setActiveItem(index)}

<Icon as={'marker'} height={44} width={44} />

`

This adjustment allows the marker to properly capture click events. If you're encountering a similar issue, this approach might help.