Info Windows

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
asyncfunctioninit():Promise<void>{
// Import the needed libraries.
const[{InfoWindow},{AdvancedMarkerElement}]=awaitPromise.all([
google.maps.importLibrary('maps'),
google.maps.importLibrary('marker'),
]);
// Get the map element and the inner map from it.
constmapElement=document.querySelector('gmp-map')!;
constinnerMap=mapElement.innerMap;
// Get the center of the map.
constcenter=mapElement.center;
// Create the info window content.
constheading=document.createElement('h1');
heading.textContent='Uluru (Ayers Rock)';
constcontent=document.createElement('div');
constinfoParagraph=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);
constlink=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.
constinfoWindow=newInfoWindow({
headerContent:heading,
content,
ariaLabel:'Uluru',
maxWidth:500,// Set max width (optional).
});
// Create the marker.
constmarker=newAdvancedMarkerElement({
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,
});
});
}
voidinit();
index.ts 

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
asyncfunctioninit(){
// Import the needed libraries.
const[{InfoWindow},{AdvancedMarkerElement}]=awaitPromise.all([
google.maps.importLibrary('maps'),
google.maps.importLibrary('marker'),
]);
// Get the map element and the inner map from it.
constmapElement=document.querySelector('gmp-map');
constinnerMap=mapElement.innerMap;
// Get the center of the map.
constcenter=mapElement.center;
// Create the info window content.
constheading=document.createElement('h1');
heading.textContent='Uluru (Ayers Rock)';
constcontent=document.createElement('div');
constinfoParagraph=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);
constlink=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.
constinfoWindow=newInfoWindow({
headerContent:heading,
content,
ariaLabel:'Uluru',
maxWidth:500,// Set max width (optional).
});
// Create the marker.
constmarker=newAdvancedMarkerElement({
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,
});
});
}
voidinit();
index.js 

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body{
height:100%;
margin:0;
padding:0;
}
style.css 

<html>
 <head>
 <title>Info Windows</title>
 <link rel="stylesheet" type="text/css" href="./style.css" />
 <script type="module" src="./index.js"></script>
 <script>
 // prettier-ignore
 (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
 key: "GOOGLE_MAPS_API_KEY"
 });
 </script>
 </head>
 <body>
 <gmp-map
 center="-25.363,131.044"
 zoom="4"
 map-id="DEMO_MAP_ID"></gmp-map>
 </body>
</html>
index.html