Exclude OverlayView from onClick event?

[Bosskee]

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! :)

[Luisdv93]

I'm currently in the exact same situation, did you manage to find a solution? @Bosskee

[gdarchen]

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 😊

[DhruvKulkarni86]

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}

{ e.stopPropagation() onClick() }} > I hope it will help you 😊

Not working for mobile devices