Info Windows

1. Introduction
2. Add an info window
3. Open an info window
4. Close an info window
5. Move an info window

Introduction

An InfoWindowdisplays content (usually text or images) in a popup window above the map, at a given location. The info window has a content area and a tapered stem. The tip of the stem is attached to a specified location on the map. Info windows appear as a Dialog to screen readers.

Typically you will attach an info window to a marker,but you can also attach an info window to a specific latitude/longitude, as described in the section on adding an info windowbelow.

Broadly speaking, info windows are a type of overlay. For information on other types of overlay, see Drawing on the map.

Add an info window

The InfoWindowconstructor takes an InfoWindowOptionsobject literal, which specifies the initial parameters for displaying the info window.

TheInfoWindowOptionsobject literal contains the following fields:

• contentcontains either a string of text or a DOM node to display in the info window.
• pixelOffsetcontains an offset from the tip of the info window to the location on which the info window is anchored. In practice, you should not need to specify this field. You can leave it at the default value.
• positioncontains theLatLngat which this info window is anchored. Note: AnInfoWindowmay be attached either to aMarkerobject (in which case its position is based on the marker's location) or on the map itself at a specifiedLatLng. One way of retrieving aLatLngis by using the Geocoding service. Opening an info window on a marker will automatically update the position.
• maxWidthspecifies the maximum width of the info window in pixels. By default, an info window expands to fit its content, and auto-wraps text if the info window fills the map. If you add amaxWidththe info window will auto-wrap to enforce the specified width. If it reaches the maximum width and there is vertical room on the screen, the info window may expand vertically.

The content of theInfoWindowmay contain a string of text, a snippet of HTML, or a DOM element. To set the content, either specify it within theInfoWindowOptionsor call setContent()on theInfoWindowexplicitly.

If you wish to explicitly size the content, you can put it in a <div>element and style the<div>with CSS. You can use CSS to enable scrolling too. Note that if you do not enable scrolling and the content exceeds the space available in the info window, the content may spill out of the info window.

Open an info window

When you create an info window, it is not displayed automatically on the map. To make the info window visible, you must call theopen()method on theInfoWindow,passing anInfoWindowOpenOptions object literal specifying the following options:

• mapspecifies the map or Street View panorama on which to open.
• anchorcontains an anchor point (for example aMarker). If theanchoroption isnullor undefined, the info window will open at itspositionproperty.

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap(): void {
const uluru = { lat: -25.363, lng: 131.044 };
const map = new google.maps.Map(
document.getElementById( "map" ) as HTMLElement,
{
zoom: 4,
center: uluru,
}
);

const contentString =
'<div id= "content" >' +
'<div id= "siteNotice" >' +
"</div>" +
'<h1 id= "firstHeading" class= "firstHeading" >Uluru</h1>' +
'<div id= "bodyContent" >' +
"<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large" +
"sandstone rock formation in the southern part of the" +
"Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi)" +
"south west of the nearest large town, Alice Springs; 450&#160;km" +
"(280&#160;mi) by road. Kata Tjuta and Uluru are the two major" +
"features of the Uluru - Kata Tjuta National Park. Uluru is" +
"sacred to the Pitjantjatjara and Yankunytjatjara, the" +
"Aboriginal people of the area. It has many springs, waterholes," +
"rock caves and ancient paintings. Uluru is listed as a World" +
"Heritage Site.</p>" +
'<p>Attribution: Uluru, <a href= "https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194" >' +
"https://en.wikipedia.org/w/index.php?title=Uluru</a>" +
"(last visited June 22, 2009).</p>" +
"</div>" +
"</div>";

const infowindow = new google.maps.InfoWindow({
content: contentString,
ariaLabel: "Uluru",
});

const marker = new google.maps.Marker({
position: uluru,
map,
title: "Uluru (Ayers Rock)",
});

marker.addListener( "click", () => {
infowindow.open({
anchor: marker,
map,
});
});
}

declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
index.ts

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
function initMap() {
const uluru = { lat: -25.363, lng: 131.044 };
const map = new google.maps.Map(document.getElementById( "map" ), {
zoom: 4,
center: uluru,
});
const contentString =
'<div id= "content" >' +
'<div id= "siteNotice" >' +
"</div>" +
'<h1 id= "firstHeading" class= "firstHeading" >Uluru</h1>' +
'<div id= "bodyContent" >' +
"<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large" +
"sandstone rock formation in the southern part of the" +
"Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi)" +
"south west of the nearest large town, Alice Springs; 450&#160;km" +
"(280&#160;mi) by road. Kata Tjuta and Uluru are the two major" +
"features of the Uluru - Kata Tjuta National Park. Uluru is" +
"sacred to the Pitjantjatjara and Yankunytjatjara, the" +
"Aboriginal people of the area. It has many springs, waterholes," +
"rock caves and ancient paintings. Uluru is listed as a World" +
"Heritage Site.</p>" +
'<p>Attribution: Uluru, <a href= "https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194" >' +
"https://en.wikipedia.org/w/index.php?title=Uluru</a>" +
"(last visited June 22, 2009).</p>" +
"</div>" +
"</div>";
const infowindow = new google.maps.InfoWindow({
content: contentString,
ariaLabel: "Uluru",
});
const marker = new google.maps.Marker({
position: uluru,
map,
title: "Uluru (Ayers Rock)",
});

marker.addListener( "click", () => {
infowindow.open({
anchor: marker,
map,
});
});
}

window.initMap = initMap;
index.js

The following example sets themaxWidthof an info window: view example.

Set focus on an info window

To set focus on an info window, call itsfocus() method. Consider using this method along with avisible event prior to setting focus. Calling this method on a non-visible info window will have no effect. Callopen()to make an info window visible.

Close an info window

By default, an info window remains open until the user clicks the close control (a cross at top right of the info window), or presses the ESC key. You can also close the info window explicitly by calling itsclose() method.

When an info window is closed, focus moves back to the element that was in focus prior to the info window being opened. If that element is unavailable, focus is moved back to the map. To override this behavior, you can listen to thecloseclickevent, and manually manage focus as shown in the following example:

infoWindow.addListener('closeclick', ()=>{
// Handle focus manually.
});

Move an info window

There are a couple of ways to change the location of an info window:

• CallsetPosition()on the info window, or
• Attach the info window to a new marker using the InfoWindow.open()method. Note: If you callopen() without passing a marker, theInfoWindowwill use the position specified upon construction through the InfoWindowOptionsobject literal.

Customization

TheInfoWindowclass does not offer customization. Instead, see the customized popup example to see how to create a fully customized popup.