title: Custom Overlays for Google Maps v3 using React
body: <p>We are building a simple React application that uses google maps to display various events on the map. We are using this repo: <a href="https://github.com/tomchentw/react-google-maps" rel="nofollow">https://github.com/tomchentw/react-google-maps</a></p>
  
  <p>This is the scenario that we are tying to create: Have a bunch of markers shown on the map and have a custom OverlayView shown at all times above the markers.</p>
  
  <p>This is the problem:
  We are also using google MarkerClusterer. While the markers get clustered when we zoom out the custom Overlays are still shown.</p>
  
  <p>What we need:
  Have the custom Overlays hide when the markers are clustered.</p>
  
  <p>Here is the code showing the rendering of our google maps. See the <code>&lt;OverlayView&gt;</code> component. It does not display anything in this example.
  Is there a way using react to detect when the markers are no longer visible on the map and then set the visibility of the custom Overlay to hidden?</p>
  
  <p>Thank you.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> return ( &lt; div &gt;
     &lt; GoogleMapLoader containerElement = { &lt; div {...this.props
       }
       style = {
         {
           height: "70vh"
         }
       }
       /&gt;}
                      googleMapElement={
                          &lt;GoogleMap
                              containerProps={{...this.props}}
                              ref="map"
                              onBoundsChanged={this.handleBoundsChanged}
                              defaultZoom={12}
                              center={
                                  center ? center: userPosition
                              }
                          &gt;{contents}
                            &lt;MarkerClusterer
                              averageCenter={true}
                              enableRetinaIcons={true}
                              gridSize={20}&gt;
  
                                  {this.data.Missions.map((marker, index) =&gt; {
      const position = marker.startLocationGeo ? {lat:marker.startLocationGeo.latitude, lng: marker.startLocationGeo.longitude} : null;
      const ref = `marker_${index}`;
      if(position){
          let icon = '';
      switch (marker.type) {
          case "hit":
           icon = "https:/ / www.dropbox.com / s / likbnwqx8y5kywv / shooting.png ? dl = 1 ";
           break;
           case "
       transport ":
           icon = "
       https: //www.dropbox.com/s/r22dfeh8lutpwv1/fourbyfour.png?dl=1";
         break;
       default: icon = "https://www.dropbox.com/s/dfjpx65j5v3wlih/pirates.png?dl=1";
       break;
     }
     return ( &lt; Marker key = {
         ref
       }
       ref = {
         ref
       }
       icon = {
         icon
       }
       position = {
         position
       }
       title = {
         marker.title
       }
       onClick = {
         this.handleMarkerClick.bind(this, marker)
       }
       onShapeChanged = {
         this.testFunction.bind(this, marker)
       } &gt;
  
       { &lt; OverlayView &gt; THIS COMPONENT SHOULD NOT BE VISIBLE WHEN MARKERS ARE CLUSTERED &lt; /OverlayView&gt;}
                  
  
                  {&lt;InfoWindow key={`infoWindow_${index}`} position={position} content={marker.value} ref={`infoWindow_${index}`}/ &gt;
       } {
         this.state.openedMissions.indexOf(marker.id.objectId) &gt; -1 ? this.renderInfoWindow(ref, marker) : null
       } &lt; /Marker&gt;
      );
      }
  })}
                              &lt;/MarkerClusterer &gt;
       &lt; SearchBox bounds = {
         this.state.bounds
       }
       controlPosition = {
         google.maps.ControlPosition.TOP_LEFT
       }
       onPlacesChanged = {
         this.handlePlacesChanged
       }
       ref = "searchBox"
       placeholder = "Search address"
       style = {
         inputStyle
       }
       /&gt;
                          &lt;/GoogleMap &gt;
     }
     /&gt;
              &lt;/div &gt;
   )</code></pre>
  </div>
  </div>
  </p>