Categories
JavaScript Answers

How to add an InfoWindow to each marker with Google Maps API v3 and JavaScript?

Spread the love

To add an InfoWindow to each marker with Google Maps API v3 and JavaScript, we call info.open.

For instance, we write

const marker = new google.maps.Marker({
  map,
  position: point,
  clickable: true,
});

marker.info = new google.maps.InfoWindow({
  content: "<b>Speed:</b> " + values.inst + " knots",
});

google.maps.event.addListener(marker, "click", () => {
  marker.info.open(map, marker);
});

set the marker.info property to an info window.

Then we call marker.info.open to open the info window when we click on the marker with addListener.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *