title: How to load a <div> on top of React google map component?
body: <p>I am trying to display a small card basically over the google maps component that this <a href="https://www.npmjs.com/package/@react-google-maps/api" rel="nofollow noreferrer">https://www.npmjs.com/package/@react-google-maps/api</a> package provides. I set the zIndex to 2 but the <code>&lt;div&gt;</code> still shows below this map component.</p>
  <p>The card element is not supposed to respond to any click it's just displayed on first load with the Map component</p>
  <pre><code>  return (
      &lt;div&gt;
        &lt;GoogleMap
          mapContainerStyle={mapContainerStyle}
          zoom={8}
          center={center}
        &gt;&lt;/GoogleMap&gt;
        &lt;Tracking style={{zIndex: 2}}/&gt;
      &lt;/div&gt;
    );
  </code></pre>
  <p>Tracking is the div that contains information.</p>
  <p>Map container style is:</p>
  <pre><code>const mapContainerStyle = {
    width: &quot;100vw&quot;,
    height: &quot;100vh&quot;,
  };
  </code></pre>