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.
