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.
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 need to call the open()
method on the InfoWindow
, passing it the Map
on
which to open, and optionally, the Marker
with which to anchor
it. If no marker is provided, the info window will open at its
position
property.
// This example displays a marker at the center of Australia. // When the user clicks the marker, an info window opens. function initMap() { var uluru = {lat: -25.363, lng: 131.044}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: uluru }); var 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>'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var marker = new google.maps.Marker({ position: uluru, map: map, title: 'Uluru (Ayers Rock)' }); marker.addListener('click', function() { infowindow.open(map, marker); }); }
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
// This example displays a marker at the center of Australia. // When the user clicks the marker, an info window opens. function initMap() { var uluru = {lat: -25.363, lng: 131.044}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: uluru }); var 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>'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var marker = new google.maps.Marker({ position: uluru, map: map, title: 'Uluru (Ayers Rock)' }); marker.addListener('click', function() { infowindow.open(map, marker); }); }
The following example sets the maxWidth
of an info window:
view example.
Close an info window
By default, an InfoWindow
remains open until the user clicks the
close control (a cross at top right of the info window). If you wish, you can
close the info window explicitly by calling its close()
method.
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.