Basic Place Autocomplete Map

constplaceAutocompleteElement=document.querySelector(
'gmp-basic-place-autocomplete'
)!;
constplaceDetailsElement=document.querySelector(
'gmp-place-details-compact'
)!;
constplaceDetailsParent=placeDetailsElement.parentElement!;
constgmpMapElement=document.querySelector('gmp-map')!;
asyncfunctioninit():Promise<void>{
// Asynchronously load required libraries from the Google Maps JS API.
const[{AdvancedMarkerElement},{InfoWindow,Circle},{Size}]=
awaitPromise.all([
google.maps.importLibrary('marker'),
google.maps.importLibrary('maps'),
google.maps.importLibrary('core'),
google.maps.importLibrary('places'),
]);
// Get the initial center directly from the gmp-map element's property.
constcenter=gmpMapElement.center;
// Set the initial location bias for the autocomplete element.
placeAutocompleteElement.locationBias=center;
// Update the map object with specified options.
constmap=gmpMapElement.innerMap;
map.setOptions({
clickableIcons:false,
mapTypeControl:false,
streetViewControl:false,
});
// Create an advanced marker to show the location of a selected place.
constadvancedMarkerElement:google.maps.marker.AdvancedMarkerElement=
newAdvancedMarkerElement({
map,
collisionBehavior:'REQUIRED_AND_HIDES_OPTIONAL',
});
// Create an InfoWindow to hold the place details component.
constinfoWindow:google.maps.InfoWindow=newInfoWindow({
minWidth:360,
disableAutoPan:true,
headerDisabled:true,
pixelOffset:newSize(0,-10),
});
// Event listener for when a place is selected from the autocomplete list.
placeAutocompleteElement.addEventListener('gmp-select',(event)=>{
// Reset marker and InfoWindow, and prepare the details element.
placeDetailsParent.appendChild(placeDetailsElement);
placeDetailsElement.style.display='block';
advancedMarkerElement.position=null;
infoWindow.close();
// Request details for the selected place.
constplaceDetailsRequest=placeDetailsElement.querySelector(
'gmp-place-details-place-request'
)!;
placeDetailsRequest.place=event.place.id;
});
// Event listener for when the place details have finished loading.
placeDetailsElement.addEventListener('gmp-load',()=>{
constlocation=placeDetailsElement.place?.location;
if(!location){
advancedMarkerElement.position=null;
return;
}
// Position the marker and open the InfoWindow at the place's location.
advancedMarkerElement.position=location;
infoWindow.setContent(placeDetailsElement);
infoWindow.open({
map,
anchor:advancedMarkerElement,
});
map.setCenter(location);
});
// Event listener to close the InfoWindow when the map is clicked.
map.addListener('click',():void=>{
infoWindow.close();
advancedMarkerElement.position=null;
});
// Event listener for when the map finishes moving (panning or zooming).
map.addListener('idle',():void=>{
constnewCenter=map.getCenter();
// Update the autocomplete's location bias to a 10km radius around the new map center.
placeAutocompleteElement.locationBias=newCircle({
center:newCenter,
radius:10000,// 10km in meters.
});
});
}
voidinit();
index.ts 

constplaceAutocompleteElement=document.querySelector(
'gmp-basic-place-autocomplete'
);
constplaceDetailsElement=document.querySelector('gmp-place-details-compact');
constplaceDetailsParent=placeDetailsElement.parentElement;
constgmpMapElement=document.querySelector('gmp-map');
asyncfunctioninit(){
// Asynchronously load required libraries from the Google Maps JS API.
const[{AdvancedMarkerElement},{InfoWindow,Circle},{Size}]=
awaitPromise.all([
google.maps.importLibrary('marker'),
google.maps.importLibrary('maps'),
google.maps.importLibrary('core'),
google.maps.importLibrary('places'),
]);
// Get the initial center directly from the gmp-map element's property.
constcenter=gmpMapElement.center;
// Set the initial location bias for the autocomplete element.
placeAutocompleteElement.locationBias=center;
// Update the map object with specified options.
constmap=gmpMapElement.innerMap;
map.setOptions({
clickableIcons:false,
mapTypeControl:false,
streetViewControl:false,
});
// Create an advanced marker to show the location of a selected place.
constadvancedMarkerElement=newAdvancedMarkerElement({
map,
collisionBehavior:'REQUIRED_AND_HIDES_OPTIONAL',
});
// Create an InfoWindow to hold the place details component.
constinfoWindow=newInfoWindow({
minWidth:360,
disableAutoPan:true,
headerDisabled:true,
pixelOffset:newSize(0,-10),
});
// Event listener for when a place is selected from the autocomplete list.
placeAutocompleteElement.addEventListener('gmp-select',(event)=>{
// Reset marker and InfoWindow, and prepare the details element.
placeDetailsParent.appendChild(placeDetailsElement);
placeDetailsElement.style.display='block';
advancedMarkerElement.position=null;
infoWindow.close();
// Request details for the selected place.
constplaceDetailsRequest=placeDetailsElement.querySelector(
'gmp-place-details-place-request'
);
placeDetailsRequest.place=event.place.id;
});
// Event listener for when the place details have finished loading.
placeDetailsElement.addEventListener('gmp-load',()=>{
constlocation=placeDetailsElement.place?.location;
if(!location){
advancedMarkerElement.position=null;
return;
}
// Position the marker and open the InfoWindow at the place's location.
advancedMarkerElement.position=location;
infoWindow.setContent(placeDetailsElement);
infoWindow.open({
map,
anchor:advancedMarkerElement,
});
map.setCenter(location);
});
// Event listener to close the InfoWindow when the map is clicked.
map.addListener('click',()=>{
infoWindow.close();
advancedMarkerElement.position=null;
});
// Event listener for when the map finishes moving (panning or zooming).
map.addListener('idle',()=>{
constnewCenter=map.getCenter();
// Update the autocomplete's location bias to a 10km radius around the new map center.
placeAutocompleteElement.locationBias=newCircle({
center:newCenter,
radius:10000,// 10km in meters.
});
});
}
voidinit();
index.js 

html,
body{
height:100%;
margin:0;
padding:0;
}
gmp-map{
height:100%;
}
gmp-basic-place-autocomplete{
position:absolute;
height:30px;
width:500px;
top:10px;
left:10px;
box-shadow:4px4px5px0pxrgba(0,0,0,0.2);
color-scheme:light;
border-radius:10px;
}
style.css 

<html>
 <head>
 <title>Basic Place Autocomplete map</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
 zoom="12"
 center="37.4220656,-122.0840897"
 map-id="DEMO_MAP_ID">
 <gmp-basic-place-autocomplete
 slot="control-inline-start-block-start"></gmp-basic-place-autocomplete>
 </gmp-map>
 <!-- Use inline styles to configure the Place Details Compact element because
 it will be placed within the info window, and info window content is inside 
 the shadow DOM when using <gmp-map> -->
 <gmp-place-details-compact
 orientation="horizontal"
 style="
 width: 400px;
 display: none;
 border: none;
 padding: 0;
 margin: 0;
 background-color: transparent;
 color-scheme: light;
 ">
 <gmp-place-details-place-request></gmp-place-details-place-request>
 <gmp-place-standard-content></gmp-place-standard-content>
 </gmp-place-details-compact>
 </body>
</html>
index.html