title: Adding Marker Label underneath a marker to Google Maps in google-maps-react
body: <p>I am using <a href="https://www.npmjs.com/package/google-maps-react" rel="nofollow noreferrer">google-maps-react</a> package to create the Google map and using Marker to create the markers.</p>
  
  <p><strong>My Question</strong>: How can I add the marker label underneath the marker? Right now I have it displaying a title but its on-top of the marker. </p>
  
  <p>I have screen shots of what I have now vs what I'm trying to accomplish besides the custom marker icon.</p>
  
  <p>This is my function of creating the marker.</p>
  
  <pre><code>displayMarkers = () =&gt; {
  const data = locationsData;
  return data.map((location, index) =&gt; {
    return (
      &lt;Marker
        key={index}
        id={index}
        position={{
          lat: location.latitude,
          lng: location.longitude,
        }}
        label={location.state}
      /&gt;
    );
  });
  </code></pre>
  
  <p>};</p>
  
  <p>Then this is my render to display the map then calling the display marker function.</p>
  
  <pre><code>render() {
  const { google } = this.props;
  return (
    &lt;Map google={google} zoom={4}&gt;
      {this.displayMarkers()}
    &lt;/Map&gt;
  );
  </code></pre>
  
  <p>}</p>
  
  <p>This is my marker now
  <img src="https://i.stack.imgur.com/taIgI.png" alt="2]"></p>
  
  <p>This is what I'm trying to get too. Don't need all the styling just the text underneath
  <img src="https://i.stack.imgur.com/WfYfn.png" alt="3]"></p>