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.

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

There you have it!