Categories
JavaScript Answers

How to add multiple markers with Infowindows with Google Maps API?

Spread the love

Sometimes, we want to add multiple markers with Infowindows with Google Maps API.

In this article, we’ll look at how to add multiple markers with Infowindows with Google Maps API.

How to add multiple markers with Infowindows with Google Maps API?

To add multiple markers with Infowindows with Google Maps API, we can create a function that returns the mouseover listener callback.

For instance, we write

const infowindow = new google.maps.InfoWindow();

google.maps.event.addListener(
  marker,
  "mouseover",
  ((marker) => {
    return () => {
      const content = address;
      infowindow.setContent(content);
      infowindow.open(map, marker);
    };
  })(marker)
);

to use the InfoWindow constructor to create an infoWindow.

Then we call addListener to add a mouseover event listener to the marker.

Then callback is the function returned by calling the anonymous function with marker.

The function sets the content of the infoWindow and open on the map over the marker with open.

Conclusion

To add multiple markers with Infowindows with Google Maps API, we can create a function that returns the mouseover listener callback.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.