Custom tooltip on marker for google maps in React

Today we’ll show you how to add a custom tooltip on marker for google maps in React. It is also known as the infoWindow in google maps.

In the previous article, we have explained how to add multiple custom markers to google maps. Here we will use the same example with slight changes. We will also set the title on marker in google maps using ReactJS.

1. Create react application

Let’s create a react application using `create-react-app` npm package. Run the following code to create a react app.

npx create-react-app custom-tooltip-google-map-react

2. Add multiple custom markers

First, we will write a logic to add multiple custom markers to google maps. Refer the following article for step by step instruction.

Add Multiple Custom Markers to Google Maps in ReactJS

3. Add tooltip on marker

Now, we have to update the marker object for tooltip. We will also set the title on markers.

Let’s slightly update the marker list to add title and tooltip on marker in `GMap.js` file.

// list of the marker object along with icon, title & info
const markerList = [
  {
    lat: 59.2967322,
    lng: 18.0009393,
    icon: 'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/256/Map-Marker-Flag--Right-Chartreuse.png',
    info: '<div><h2>Info 1</h2><p>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.</p></div>',
    title: "Title 1"
  },
  {
    lat: 59.2980245,
    lng: 17.9971503,
    icon: 'https://cdn2.iconfinder.com/data/icons/IconsLandVistaMapMarkersIconsDemo/256/MapMarker_Marker_Outside_Chartreuse.png',
    info: '<div><h2>Info 2</h2><p>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.</p></div>',
    title: "Title 2"
  },
  {
    lat: 59.2981078,
    lng: 17.9980875,
    icon: 'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/256/Map-Marker-Ball-Right-Azure.png',
    info: '<div><h2>Info 3</h2><p>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.</p></div>',
    title: "Title 3"
  },
  {
    lat: 59.2987638,
    lng: 17.9917639,
    icon: 'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/256/Map-Marker-Marker-Outside-Pink.png',
    info: '<div><h2>Info 4</h2><p>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.</p></div>',
    title: "Title 4"
  }
];

We have to add the title attribute in the `google.maps.Marker` and create an info window to manage show/hide window on click of the marker. We will use the click event listener to open the info window.

Check the following code of the `createMarker` function in the same file.

// create marker on google map
const createMarker = (markerObj) => {
  const marker = new window.google.maps.Marker({
    position: { lat: markerObj.lat, lng: markerObj.lng },
    map: googleMap,
    icon: {
      url: markerObj.icon,
      // set marker width and height
      scaledSize: new window.google.maps.Size(50, 50)
    },
    title: markerObj.title
  });

  const infowindow = new window.google.maps.InfoWindow({ content: markerObj.info });
  marker.addListener("click", () => infowindow.open(googleMap, marker));

  return marker;
}

4. Output

Run the project and check the output in the browser.

Output - Custom tooltip on marker for google maps in React - Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

Github Repository StackBlitz Project

Custom tooltip on marker for google maps in React