Reverse Geocoding

letmarker:google.maps.marker.AdvancedMarkerElement;
asyncfunctioninit(){
// Request the needed libraries.
const[{InfoWindow},{Geocoder},{AdvancedMarkerElement}]=
awaitPromise.all([
google.maps.importLibrary('maps'),
google.maps.importLibrary('geocoding'),
google.maps.importLibrary('marker'),
]);
// Get the gmp-map element.
constmapElement=document.querySelector('gmp-map')!;
// Get the inner map.
constinnerMap=mapElement.innerMap;
// Get the latlng input box.
constlatLngQuery=document.getElementById('latlng')asHTMLInputElement;
// Get the submit button.
constsubmitButton=document.getElementById('submit')!;
// Set the cursor to crosshair.
innerMap.setOptions({
draggableCursor:'crosshair',
zoom:13,
mapTypeControl:false,
});
// Create a marker for re-use.
marker=newAdvancedMarkerElement({
map:innerMap,
});
marker.anchorTop='40px';
constgeocoder=newGeocoder();
constinfoWindow=newInfoWindow();
// Add a click event listener to the submit button.
submitButton.addEventListener('click',()=>{
voidgeocodeLatLng(geocoder,innerMap,infoWindow);
});
// Add a click event listener to the map.
innerMap.addListener('click',(event:google.maps.MapMouseEvent)=>{
if(event.latLng){
latLngQuery.value=`${event.latLng.lat()}, ${event.latLng.lng()}`;
voidgeocodeLatLng(geocoder,innerMap,infoWindow);
}
});
// Make an initial request upon loading.
voidgeocodeLatLng(geocoder,innerMap,infoWindow);
}
asyncfunctiongeocodeLatLng(
geocoder:google.maps.Geocoder,
map:google.maps.Map,
infoWindow:google.maps.InfoWindow
){
constinput=(document.getElementById('latlng')asHTMLInputElement).value;
constlatlngStr=input.split(',',2);
constlatlng={
lat:parseFloat(latlngStr[0]),
lng:parseFloat(latlngStr[1]),
};
try{
const{results}=awaitgeocoder.geocode({location:latlng});
if(results[0]){
marker.position=latlng;
map.setCenter(latlng);
infoWindow.setContent(results[0].formatted_address);
infoWindow.open(map,marker);
}else{
window.alert('No results found');
}
}catch(e){
window.alert('Geocoder failed due to: '+String(e));
}
}
voidinit();
index.ts 

letmarker;
asyncfunctioninit(){
// Request the needed libraries.
const[{InfoWindow},{Geocoder},{AdvancedMarkerElement}]=
awaitPromise.all([
google.maps.importLibrary('maps'),
google.maps.importLibrary('geocoding'),
google.maps.importLibrary('marker'),
]);
// Get the gmp-map element.
constmapElement=document.querySelector('gmp-map');
// Get the inner map.
constinnerMap=mapElement.innerMap;
// Get the latlng input box.
constlatLngQuery=document.getElementById('latlng');
// Get the submit button.
constsubmitButton=document.getElementById('submit');
// Set the cursor to crosshair.
innerMap.setOptions({
draggableCursor:'crosshair',
zoom:13,
mapTypeControl:false,
});
// Create a marker for re-use.
marker=newAdvancedMarkerElement({
map:innerMap,
});
marker.anchorTop='40px';
constgeocoder=newGeocoder();
constinfoWindow=newInfoWindow();
// Add a click event listener to the submit button.
submitButton.addEventListener('click',()=>{
voidgeocodeLatLng(geocoder,innerMap,infoWindow);
});
// Add a click event listener to the map.
innerMap.addListener('click',(event)=>{
if(event.latLng){
latLngQuery.value=`${event.latLng.lat()}, ${event.latLng.lng()}`;
voidgeocodeLatLng(geocoder,innerMap,infoWindow);
}
});
// Make an initial request upon loading.
voidgeocodeLatLng(geocoder,innerMap,infoWindow);
}
asyncfunctiongeocodeLatLng(geocoder,map,infoWindow){
constinput=document.getElementById('latlng').value;
constlatlngStr=input.split(',',2);
constlatlng={
lat:parseFloat(latlngStr[0]),
lng:parseFloat(latlngStr[1]),
};
try{
const{results}=awaitgeocoder.geocode({location:latlng});
if(results[0]){
marker.position=latlng;
map.setCenter(latlng);
infoWindow.setContent(results[0].formatted_address);
infoWindow.open(map,marker);
}else{
window.alert('No results found');
}
}catch(e){
window.alert('Geocoder failed due to: '+String(e));
}
}
voidinit();
index.js 

/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
gmp-map{
height:100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body{
height:100%;
margin:0;
padding:0;
font-family:Roboto,sans-serif;
}
#floating-panel{
background-color:#fff;
border-radius:5px;
box-shadow:rgba(0,0,0,0.35)0px5px15px;
margin:10px;
padding:10px;
font-family:Roboto,sans-serif;
font-size:1rem;
}
#latlng{
width:100%;
font-family:Roboto,sans-serif;
font-size:1rem;
margin-bottom:4px;
}
#submit{
font-size:1rem;
}
style.css 

<html>
 <head>
 <title>Reverse Geocoding</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="0.714224, -73.961452" zoom="8" map-id="DEMO_MAP_ID">
 <div id="floating-panel" slot="control-block-start-inline-start">
 <p>
 Click the map to reverse geocode, or add your own
 coordinates.
 </p>
 <input
 id="latlng"
 type="text"
 value="40.714224, -73.961452" /><br />
 <input id="submit" type="button" value="Reverse Geocode" />
 </div>
 </gmp-map>
 </body>
</html>
index.html