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

Tags: , , , ,

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, index) => {
  return (
        lat: location.latitude,
        lng: location.longitude,


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 is my marker now 2]

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


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:


I hope this helps!

Source: stackoverflow