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.
![An InfoWindow displaying information about a location in Australia.](https://developers.google.cn/static/maps/documentation/javascript/images/info-window.png?authuser=9)
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 theLatLng
at which this info window is anchored. Note: AnInfoWindow
may be attached either to aMarker
object (in which case its position is based on the marker's location) or on the map itself at a specifiedLatLng
. One way of retrieving aLatLng
is by using the Geocoding service. Opening an info window on a marker will automatically update theposition
.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 amaxWidth
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 aMarker
). If theanchor
option isnull
or undefined, the info window will open at itsposition
property.
TypeScript
// 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 km (208 mi) " + "south west of the nearest large town, Alice Springs; 450 km " + "(280 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;
JavaScript
// 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 km (208 mi) " + "south west of the nearest large town, Alice Springs; 450 km " + "(280 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;
Try Sample
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 callopen()
without passing a marker, theInfoWindow
will use the position specified upon construction through theInfoWindowOptions
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.