title: React-google-map - How to add click listener to the overlay element to stopPropogation()
body: <p>I'm using react google map <a href="https://github.com/tomchentw/react-google-maps" rel="nofollow noreferrer">react-google-maps</a>, and added a overlay to the map. When i click on the overlay it triggers the google info window for the place that sits behind the overlay div since MapPanes.mapPane has the high priority than overlayLayer.</p>
  
  <p><a href="https://i.stack.imgur.com/G5rrF.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G5rrF.gif" alt="Triggers google info window on clicking overlay"></a></p>
  
  <p>I found a solution from here <a href="https://groups.google.com/forum/#!topic/google-maps-js-api-v3/726OKUJCG6s" rel="nofollow noreferrer">https://groups.google.com/forum/#!topic/google-maps-js-api-v3/726OKUJCG6s</a>, but that's in pure JavaScript implementation.</p>
  
  <p>How can i add <code>google.maps.event.addDomListener(div, 'click', cancelEvent )</code> in react-google-maps ( Maybe using refs, but tried this too )?</p>
  
  <p>Below is the code i'm using to generate map and overlay,</p>
  
  <pre><code>import { withGoogleMap, GoogleMap, InfoWindow, Marker, OverlayView } from "react-google-maps";
  
  const GeolocationGoogleMap = withGoogleMap(props =&gt; (  
    &lt;GoogleMap defaultZoom={16} center={props.center} ref={ props.onGoogleMapRef }&gt;
      {
          props.markers.map((marker,index) =&gt; (
              &lt;Marker
              key={index}
              position={marker.position || {} }
              onClick={() =&gt; props.onMarkerClick(marker)}
              {...marker}
              &gt;
                {
                  marker.showInfo &amp;&amp; &lt;OverlayView
                    position={ marker.position }
                    mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
                    getPixelPositionOffset={getPixelPositionOffset}
                    onClick={ () =&gt; props.onMarkerClosemarker( marker.markerId ) }
                    ref={ (e) =&gt; props.onOverlayRef(e) }
                  &gt;
                      { marker.content } 
                  &lt;/OverlayView&gt;
                }
              &lt;/Marker&gt;        
          ))
      }
    &lt;/GoogleMap&gt;
  ));
  
  class GoogleMapContainer extends Component {
      onOverlayRef = ref =&gt;{
          console.log( "&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; OVERLAY REF &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;" );
          console.log( ref );
      }
  
      render() {
          return (
            &lt;div&gt;
              &lt;GeolocationGoogleMap
                containerElement={
                  &lt;div className="google-map" /&gt;
                }
                mapElement={
                  &lt;div style={{ height: `100%` }} /&gt;
                }
                onMarkerClick={this.handleMarkerClick.bind(this)}
                center={this.state.center}
                mapcenter={this.state.mapcenter}
                content={this.state.content}
                radius={this.state.radius}
                markers={this.state.markers}
                onMarkerClosemarker={this.handleMarkerClose.bind(this)}
                onGoogleMapRef={this.setMapRef}
                onOverlayRef={this.onOverlayRef}
              &gt;
              &lt;/GeolocationExampleGoogleMap&gt;
            &lt;/div&gt;
          );
      }
  }
  </code></pre>