Show Info Window On Google Maps API JavaScript

The Info Window is a tooltip or callout element that can display some information about a place when a marker is clicked.

Attach A Click Event To The Marker

Once the marker is instantiated, we can attach an addListener()click event to it.

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.
• The actual event name click, and
• The callback function().

Instantiate the Info Window Object

Inside the arrow callback function, instantiate the info window object.

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

[blog-in-between-card]

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

There you have it!