Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom marker onclick does not work #196

Open
EldinHb opened this issue Dec 8, 2023 · 4 comments
Open

Custom marker onclick does not work #196

EldinHb opened this issue Dec 8, 2023 · 4 comments

Comments

@EldinHb
Copy link

EldinHb commented Dec 8, 2023

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
Copy link

Same here

@EnriqueRBT
Copy link

Well, I solved forking and modifing Marker.tsx:

image

@santaclawn
Copy link

santaclawn commented Jan 3, 2024

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
Copy link

any solution ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants