How to create a custom InfoWindow with Google Maps and JavaScript?

To create a custom InfoWindow with Google Maps and JavaScript, we use the InfoWindow constructor.

For instance, we write

const infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(
  marker,
  "mouseover",
  ((marker) => {
    return () => {
      const content = address;
      infowindow.setContent(content);
      infowindow.open(map, marker);
    };
  })(marker)
);

to call addListener to listen for marker‘s mouseover event with a event listener that’s returned by calling the outer function with marker.

We set the infoWindow‘s content with setContent.

And we open it with open.