react-google-maps-api
react-google-maps-api copied to clipboard
Exclude OverlayView from onClick event?
Hello!
I'm in a situation where I have a custom component placed on the Map that's wrapped in an OverlayView. The problem is that the Map's onClick
event is triggered when I click the custom component. Code:
<GoogleMap
onClick={ev => handleMapClick(ev)}
<OverlayView mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET} position={{ lat: 55.65962399163509, lng: 13.144821899750333 }}>
<IncidentMarker />
</OverlayView>
</GoogleMap>
Notice that my Component <IncidentMarker />
is wrapped in <OverlayView>
. I read in the docs that "The click event is not fired if a Marker or InfoWindow was clicked."
I'm wondering if the <OverlayView>
also can be excluded from the onClick event? Any ideas on this? Might be a possible feature request.
Thanks for any input on this, and thanks for an awesome library! :)
I'm currently in the exact same situation, did you manage to find a solution? @Bosskee
Hi @Luisdv93,
I was facing the same issue and found a way to bypass it.
On my component inside the OverlayView
, I changed my onClick
callback to stop propagating the parent event, as follows:
<OverlayViewF
position={googleMapsUtils.positionToCoords(position)}
mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
>
<MarkerContainer>
<Marker
onClick={(e: MouseEvent) => {
e.stopPropagation()
onClick()
}}
>
<Icon name={icon} size={size} />
</Marker>
</MarkerContainer>
</OverlayViewF>
I hope it will help you 😊