title: Set z-index of OverlayView in react-google-maps
body: <p>I am using <a href="https://github.com/tomchentw/react-google-maps" rel="nofollow noreferrer">react-google-maps</a> and I want to accomplish something similar to Airbnb where when you hover over a search result and then a "marker" (aka <code>OverlayView</code>) is highlighted on the map. But the issue I am trying to solve is if an <code>OverlayView</code> is underneath another <code>OverlayView</code>, I want to bring that "active" <code>OverlayView</code> to the top (like by adjusting the z-index). The map on Airbnb does this very thing, which is when you hover over the search result and inspect the marker the <code>z-index</code> is altered to be <code>9001</code> to ensure it is brought to the front of all other markers.</p>
  
  <p>There are a few issues related to this from years ago that have not received any movement:</p>
  
  <p><a href="https://github.com/tomchentw/react-google-maps/issues/199" rel="nofollow noreferrer">tomchentw/react-google-maps#199</a>
  <a href="https://github.com/tomchentw/react-google-maps/issues/93" rel="nofollow noreferrer">tomchentw/react-google-maps#93</a></p>
  
  <p>In issue #199 it was mentioned you could hack around it with <code>this.refs.childDiv.parentNode</code> and setting <code>z-index</code> on that, but in React v16 <code>this.refs</code> is no longer a thing from what I can tell (it was deprecated). The original commenter attached a <a href="https://jsfiddle.net/medmunds/9b7qr7v8/" rel="nofollow noreferrer">jsfiddle</a> with the code sample which was:</p>
  
  <pre><code>class OverlayViewExample extends React.Component {
    render () {
      const pos = {lat: -34.397, lng: 150.644};
      const mapPane = OverlayView.OVERLAY_MOUSE_TARGET;
      const getOffset = this.getPixelPositionOffset.bind(this);
  
      return (
        &lt;GoogleMap
          defaultZoom={8}
          defaultCenter={pos}
        &gt;
          &lt;OverlayView
            position={pos}
            mapPaneName={mapPane}
            getPixelPositionOffset={getOffset}
          &gt;
            &lt;div style={{zIndex: 2}} className="overlay" ref="childDiv"&gt;This should be in front&lt;/div&gt;
          &lt;/OverlayView&gt;
  
          &lt;OverlayView
            position={pos}
            mapPaneName={mapPane}
            getPixelPositionOffset={getOffset}
          &gt;
            &lt;div style={{zIndex: 1}} className="overlay"&gt;Another overlay should be in front of me&lt;/div&gt;
          &lt;/OverlayView&gt;
        &lt;/GoogleMap&gt;
      );
    }
  
    getPixelPositionOffset (width, height) {
      // this.refs is an empty object when I tried this :(
      if (this.refs.childDiv) {
          this.refs.childDiv.parentNode.style.zIndex = 2;
      }
      return { x: -(width / 2), y: -(height / 2) };
    }
  }
  </code></pre>
  
  <p>When I tried this workaround, <code>this.refs</code> was an empty object and therefore I could not alter the underlying <code>zIndex</code> of that node. </p>
  
  <p>Is there another way to ensure when two <code>OverlayView</code>s are near each other that I can bring the one in the background to the foreground?</p>