Info Windows

An InfoWindow object adds a popup window over the map at a given location and is used to display content. The info window has a content area and a tapered stem with the tip attached to some specific location on the map. An info window is usually attached to a marker or to some specific latitude and longitude.

Add an info window to the map

The InfoWindow constructor holds an InfoWindowOptions object literal. This object literal is used to specify the initial parameters of the info window.

InfoWindowOptions parameters

All InfoWindowOptions parameters are optional, and there are no required parameters. Here’s a list of all the optional InfoWindowOptions parameters that we can pass to the InfoWindow constructor:

We can also modify these parameters after the construction of the map using the setValues() method.

Here’s a code snippet that demonstrates how to add an info window for the Great Pyramid of Giza using some of the properties above:

const infowindow = new google.maps.InfoWindow({
	arialabel: null,
	content: "The Great Pyramid of Giza",
	position: { lat: 29.9792, lng: 31.1342 }, // Coordinates of the Great Pyramid of Giza
	disableAutoPan: true,
	maxWidth: 100,
	maxWidth: 50,
	pixeloffset: new google.maps.Size(100, -500),
	position: { lat: 29.9792, lng: 31.1342 }, // Coordinates of the Great Pyramid of Giza
	zIndex: 1,
});

Open an info window

The info window is not displayed on the map automatically upon its creation. To make it visible, we call the open() method, and pass an InfoWindowOpenOptions object literal to it.

InfoWindowOpenOptions parameters

All InfoWindowOpenOptions parameters are optional since there are no required parameters. Here’s a list of all the optional InfoWindowOpenOptions parameters:

Here’s how to open an info method using the open() method with all of the parameters discussed above:

infowindow.open({
	anchor: marker,
	map: map,
	shouldFocus: false,
});

Close an info window

An info window stays open until the user clicks the cross at the top right of the info window or presses the escape key. The info window can also be closed by explicitly calling the close() method. Here’s how to close an info window called infowindow:

infowindow.close();

Code example

In the following example, an info window appears when the marker location is clicked on the map. Play around with the values of maxWidth and other parameters below to see what happens:

Here’s a brief explanation of the JavaScript file in the above code widget:

• Line 8: We center the map view on Uluru, representing the region right in the middle of Australia.
• Line 11: We define the content string we will use in the info window inside the contentString variable.
• Lines 33–35: We create the entire InfoWindow object and store it in the infowindow variable. We add the content string to the content property of the infoWindow object.
• Lines 37–41: We define a marker object centered on Uluru, which we will use as an anchor point for our info window.
• Line 43: We add a click event listener for the marker.
• Lines 44–48: We use the infowindow.open() method to display an info window whenever we click on the marker.
• Line 50: We initialize a timeout function in this line. Whenever five seconds pass, the timeout function calls the infowindow.close() method, closing the info window.