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 InfoWindow displays 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 window below.

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 InfoWindow constructor takes an InfoWindowOptions object literal, which specifies the initial parameters for displaying the info window.

The InfoWindowOptions object literal contains the following fields:

• content contains either a string of text or a DOM node to display in the info window.
• pixelOffset contains 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.
• position contains the LatLng at which this info window is anchored. Note: An InfoWindow may be attached either to a Marker object (in which case its position is based on the marker's location) or on the map itself at a specified LatLng. One way of retrieving a LatLng is by using the Geocoding service. Opening an info window on a marker will automatically update the position.
• maxWidth specifies 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 a maxWidth the 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 the InfoWindow may contain a string of text, a snippet of HTML, or a DOM element. To set the content, either specify it within the InfoWindowOptions or call setContent() on the InfoWindow explicitly.

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 the open() method on the InfoWindow, passing an InfoWindowOpenOptions object literal specifying the following options:

• map specifies the map or Street View panorama on which to open.
• anchor contains an anchor point (for example a Marker). If the anchor option is null or undefined, the info window will open at its position property.
• shouldFocus specifies whether or not focus should be moved inside the info window when it is opened.

// 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,
  });

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

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

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,
  });
  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

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

window.initMap = initMap;
index.js

The following example sets the maxWidth of an info window: view example.

Set focus on an info window

To set focus on an info window, call its focus() method. Consider using this method along with a visible event prior to setting focus. Calling this method on a non-visible info window will have no effect. Call open() 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 its close() 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 the closeclick event, 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:

• Call setPosition() on the info window, or
• Attach the info window to a new marker using the InfoWindow.open() method. Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.

Customization

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