Adding Marker Label underneath a marker to Google Maps in google-maps-react

Question

I am using google-maps-react package to create the Google map and using Marker to create the markers.

My Question: 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.

I have screen shots of what I have now vs what I'm trying to accomplish besides the custom marker icon.

This is my function of creating the marker.

displayMarkers = () => {
const data = locationsData;
return data.map((location, index) => {
  return (
    <Marker
      key={index}
      id={index}
      position={{
        lat: location.latitude,
        lng: location.longitude,
      }}
      label={location.state}
    />
  );
});

};

Then this is my render to display the map then calling the display marker function.

render() {
const { google } = this.props;
return (
  <Map google={google} zoom={4}>
    {this.displayMarkers()}
  </Map>
);

}

This is my marker now

This is what I'm trying to get too. Don't need all the styling just the text underneath

Answer 1

Setting the pixelOffset property of the InfoWindow to zero (0) will move the InfoWindow to the bottom of the marker. For example, pixelOffset={"0"}

Here is how you can do this on google-maps-react:

<InfoWindow
    pixelOffset={"0"}
    marker={this.state.activeMarker}
    visible={this.state.showingInfoWindow}>
    <div>
       <h1>{this.state.selectedPlace.name}</h1>
    </div>
</InfoWindow>

I hope this helps!