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

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

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!

Advertisement

Answer