` element and style the `
` 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.
> [!NOTE]
> **Best practices:** For the best user experience, only one info window should be open on the map at any one time. Multiple info windows make the map appear cluttered. If you only need one info window at a time, you can create just one `InfoWindow` object and open it at different locations or markers upon map events, such as user clicks. If you do need more than one info window, you can display multiple `InfoWindow` objects at the same time.
## 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`](https://developers.google.com/maps/documentation/javascript/reference/info-window.md.txt#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.
### TypeScript
```typescript
// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
async function init(): Promise {
// Import the needed libraries.
const [{ InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([
google.maps.importLibrary('maps'),
google.maps.importLibrary('marker'),
]);
// Get the map element and the inner map from it.
const mapElement = document.querySelector('gmp-map')!;
const innerMap = mapElement.innerMap;
// Get the center of the map.
const center = mapElement.center;
// Create the info window content.
const heading = document.createElement('h1');
heading.textContent = 'Uluru (Ayers Rock)';
const content = document.createElement('div');
const infoParagraph = document.createElement('p');
infoParagraph.textContent = `Uluru, also referred to as Ayers Rock, 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.`;
content.appendChild(infoParagraph);
const link = document.createElement('a');
link.href = 'https://en.wikipedia.org/w/index.php?title=Uluru';
link.textContent = 'https://en.wikipedia.org/w/index.php?title=Uluru';
link.target = '_blank';
content.appendChild(link);
// Create the info window.
const infoWindow = new InfoWindow({
headerContent: heading,
content,
ariaLabel: 'Uluru',
maxWidth: 500, // Set max width (optional).
});
// Create the marker.
const marker = new AdvancedMarkerElement({
position: center,
map: innerMap,
title: 'Uluru (Ayers Rock)',
gmpClickable: true,
});
// Open the info window when the map loads.
infoWindow.open({
anchor: marker,
map: innerMap,
});
// Open the info window when the marker is clicked.
marker.addEventListener('gmp-click', () => {
infoWindow.open({
anchor: marker,
map: innerMap,
});
});
}
void init();
```
### JavaScript
```javascript
// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
async function init() {
// Import the needed libraries.
const [{ InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([
google.maps.importLibrary('maps'),
google.maps.importLibrary('marker'),
]);
// Get the map element and the inner map from it.
const mapElement = document.querySelector('gmp-map');
const innerMap = mapElement.innerMap;
// Get the center of the map.
const center = mapElement.center;
// Create the info window content.
const heading = document.createElement('h1');
heading.textContent = 'Uluru (Ayers Rock)';
const content = document.createElement('div');
const infoParagraph = document.createElement('p');
infoParagraph.textContent = `Uluru, also referred to as Ayers Rock, 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.`;
content.appendChild(infoParagraph);
const link = document.createElement('a');
link.href = 'https://en.wikipedia.org/w/index.php?title=Uluru';
link.textContent = 'https://en.wikipedia.org/w/index.php?title=Uluru';
link.target = '_blank';
content.appendChild(link);
// Create the info window.
const infoWindow = new InfoWindow({
headerContent: heading,
content,
ariaLabel: 'Uluru',
maxWidth: 500, // Set max width (optional).
});
// Create the marker.
const marker = new AdvancedMarkerElement({
position: center,
map: innerMap,
title: 'Uluru (Ayers Rock)',
gmpClickable: true,
});
// Open the info window when the map loads.
infoWindow.open({
anchor: marker,
map: innerMap,
});
// Open the info window when the marker is clicked.
marker.addEventListener('gmp-click', () => {
infoWindow.open({
anchor: marker,
map: innerMap,
});
});
}
void init();
```
[View example](https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple.md.txt)
### Try Sample
[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps-samples/js-api-samples/tree/main/dist/samples/infowindow-simple/jsfiddle)
The following example sets the `maxWidth` of an info window:
[view example](https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple-max).
## Set focus on an info window
To set focus on an info window, call its [`focus()`](https://developers.google.com/maps/documentation/javascript/reference/info-window.md.txt#InfoWindow.focus)
method. Consider using this method along with a [`visible`](https://developers.google.com/maps/documentation/javascript/reference/info-window.md.txt#InfoWindow.visible)
event prior to setting focus. Calling this method on a non-visible info
window will have no effect. Call [`open()`](https://developers.google.com/maps/documentation/javascript/infowindows.md.txt#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:
```javascript
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.