React-google-maps: How to stop propagation of events from OverlayView to Map?

[EPecherkin]

I have some overlay views with react content on map. Content have onClick handlers.
Also I have onClick handler on map.
When I click on overlay view content map receive click too.
As I noticed, map receive click event first. And second is overlay view.
And is is the problem.

[ksavenkov]

Second that. As I understand, this is not the intended behavior of Google Maps. It breaks the use case when OverlayView is used to display a menu, which is closed by clicking on the map.

[ksavenkov]

Actually, I've found a workaround: added overlayHovered flag to the state and check it in handleMapClick function.

[tomchentw]

I've noticed the same behavior in the #basics/overlay-view example.

[juanbiltes]

Having the same issue here, was there a better solution for this?

[tomchentw]

Feel free to submit a PR. Close for now

We're also looking for maintainers. Involve in #266 to help strengthen our community!

[urikphytech]

Anyone find a good solution for this?

[tomhalley]

This seems to be a bug inherent in google maps.

One guy said he found a fix, but that didn't work for me...

And the hover solution suggested by @ksavenkov and another guy in this stackoverflow thread doesn't work on mobile, so not a long term fix.

I've had to deal with this issue a year ago, and now coming back to it again. I think it's getting to a point where I'd pay money

[ufon]

up please

[madrussa]

I've found a solution that seems to work nicely using the static preventMapHitsFrom and preventMapHitsAndGesturesFrom methods from https://developers.google.com/maps/documentation/javascript/reference/overlay-view#OverlayView.preventMapHitsFrom

In your component or HTML Element within your OverlayView you can call preventMapHitsFrom on your element that you don't want your mouse or touch events filtering down to the map

class OverlayInner extends React.Component {
  handleClick = () => {
    console.log('I still work');
  }
  render () {
    <div
      ref={ ref => ref && google.maps.OverlayView.preventMapHitsFrom(ref) }
      onClick={this.handleClick}
    />
      Dont click map
    </div>
  }
}

Your standard onClick events will continue to work.

[tomhalley]

Wow... is that new @madrussa? That's worked perfectly.

I spent over a year looking for a fix for that...

[madrussa]

Yeah it looks new. I can see it in 3.33 but not 3.32. My only concern is that it's a black hole and it could lead to memory leaks... as you feed it references, but what happens when they remove?