Next Previous

Maps API Info Window

33

The Info Window shows content in a popup/tooltip window on top of the map in a given location.

Let’s see how to display Info Window when the marker on the map is clicked.

Once you have a marker on the map, add a click event to it.

So, attach click event by calling addListener().

 google.maps.event.addListener(marker, "click", () => {
      var infowindow = new google.maps.InfoWindow();
      infowindow.setContent(`<div class="ui header">Parliment Hill</div>`);
      infowindow.open(map, marker);
    });

This will take THREE parameters.

  • The marker that you want to attach a click event to.
  • Actual event name click, and
  • The callback function().

Inside the callback function(), instantiate info window object.

Then, set some content by invoking the setContent() method on infowindow object.

Finally, run an open() method on the info window object with two arguments that are the map and the marker.

Next Previous