This example displays a marker at the center of Australia. When the user clicks the marker, an info window appears that has a maximum width of 200 pixels.
Read thedocumentation.
TypeScript
// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
// The maximum width of the info window is set to 200 pixels.
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,
maxWidth: 200,
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.
// The maximum width of the info window is set to 200 pixels.
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,
maxWidth: 200,
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;
CSS
/*
* 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;
}
HTML
<html> <head> <title>Info Window With maxWidth</title> <link rel= "stylesheet" type= "text/css" href= "./style.css" /> <script type= "module" src= "./index.js" ></script> </head> <body> <div id= "map" ></div> <!-- The `defer` attribute causes the script to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google /maps/documentation/javascript/load-maps-js-api for more information. --> <script src= "https://maps.googleapis /maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body> </html>
Try Sample
Clone Sample
Git and Node.js are required to run this sample locally. Follow theseinstructionsto install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
git clone -b sample-infowindow-simple-max https://github /googlemaps/js-samples.gitcd js-samplesnpm inpm start
Other samples can be tried by switching to any branch beginning withsample-SAMPLE_NAME.
git checkout sample-SAMPLE_NAMEnpm inpm start