Categories
JavaScript Answers

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

Spread the love

To add an InfoWindow to each marker with JavaScript Google Maps API v3, we set the info property of the marker.

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);
});

to create a marker with the Marker constructor.

Then we set its info property to an InfoWindow instance which has the content set to some text.

And then we add a marker click listener with addListener to open the info window with marker.info.open when we click on the marker.

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 *