UI Kit Place Text Search

// Query selectors for various elements in the HTML file.
constmap=document.querySelector('gmp-map')!;
constplaceSearch=document.querySelector('gmp-place-search')!;
constplaceSearchQuery=document.querySelector(
'gmp-place-text-search-request'
)!;
constplaceDetails=document.querySelector('gmp-place-details-compact')!;
constplaceRequest=document.querySelector('gmp-place-details-place-request')!;
constqueryInput=document.querySelector('.query-input')asHTMLInputElement;
constsearchButton=document.querySelector('.search-button')!;
// Global variables for the map, markers, and info window.
constmarkers=newMap<string,google.maps.marker.AdvancedMarkerElement>();
letinfoWindow:google.maps.InfoWindow;
// The init function is called when the page loads.
asyncfunctioninit():Promise<void>{
// Import the necessary libraries from the Google Maps API.
const[{InfoWindow}]=awaitPromise.all([
google.maps.importLibrary('maps'),
google.maps.importLibrary('places'),
]);
// Create a new info window and set its content to the place details element.
placeDetails.remove();// Hide the place details element because it is not needed until the info window opens
infoWindow=newInfoWindow({
content:placeDetails,
ariaLabel:'Place Details',
});
// Set the map options.
map.innerMap.setOptions({
clickableIcons:false,
mapTypeControl:false,
streetViewControl:false,
});
// Add event listeners to the query input and place search elements.
searchButton.addEventListener('click',()=>{
searchPlaces();
});
queryInput.addEventListener('keydown',(event)=>{
if(event.key==='Enter'){
searchPlaces();
}
});
placeSearch.addEventListener('gmp-select',(event)=>{
const{place}=event;
markers.get(place.id)?.click();
});
placeSearch.addEventListener('gmp-load',()=>{
voidaddMarkers();
});
searchPlaces();
}
// The searchPlaces function is called when the user changes the query input or when the page loads.
functionsearchPlaces(){
// Close the info window and clear the markers.
infoWindow.close();
for(constmarkerofmarkers.values()){
marker.remove();
}
markers.clear();
// Set the place search query and add an event listener to the place search element.
if(queryInput.value){
constcenter=map.center;
if(center){
placeSearchQuery.locationBias=center;
}
// The textQuery property is required for the search element to load.
// Any other configured properties will be ignored if textQuery is not set.
placeSearchQuery.textQuery=queryInput.value;
}
}
// The addMarkers function is called when the place search element loads.
asyncfunctionaddMarkers(){
// Import the necessary libraries from the Google Maps API.
const[{AdvancedMarkerElement},{LatLngBounds}]=awaitPromise.all([
google.maps.importLibrary('marker'),
google.maps.importLibrary('core'),
]);
constbounds=newLatLngBounds();
if(placeSearch.places.length===0){
return;
}
for(constplaceofplaceSearch.places){
if(!place.location){
continue;
}
constmarker=newAdvancedMarkerElement({
map:map.innerMap,
position:place.location,
collisionBehavior:'REQUIRED_AND_HIDES_OPTIONAL',
});
markers.set(place.id,marker);
bounds.extend(place.location);
marker.addListener('click',()=>{
placeRequest.place=place;
infoWindow.open(map.innerMap,marker);
});
}
map.innerMap.fitBounds(bounds);
}
voidinit();
index.ts 

// Query selectors for various elements in the HTML file.
constmap=document.querySelector('gmp-map');
constplaceSearch=document.querySelector('gmp-place-search');
constplaceSearchQuery=document.querySelector(
'gmp-place-text-search-request'
);
constplaceDetails=document.querySelector('gmp-place-details-compact');
constplaceRequest=document.querySelector('gmp-place-details-place-request');
constqueryInput=document.querySelector('.query-input');
constsearchButton=document.querySelector('.search-button');
// Global variables for the map, markers, and info window.
constmarkers=newMap();
letinfoWindow;
// The init function is called when the page loads.
asyncfunctioninit(){
// Import the necessary libraries from the Google Maps API.
const[{InfoWindow}]=awaitPromise.all([
google.maps.importLibrary('maps'),
google.maps.importLibrary('places'),
]);
// Create a new info window and set its content to the place details element.
placeDetails.remove();// Hide the place details element because it is not needed until the info window opens
infoWindow=newInfoWindow({
content:placeDetails,
ariaLabel:'Place Details',
});
// Set the map options.
map.innerMap.setOptions({
clickableIcons:false,
mapTypeControl:false,
streetViewControl:false,
});
// Add event listeners to the query input and place search elements.
searchButton.addEventListener('click',()=>{
searchPlaces();
});
queryInput.addEventListener('keydown',(event)=>{
if(event.key==='Enter'){
searchPlaces();
}
});
placeSearch.addEventListener('gmp-select',(event)=>{
const{place}=event;
markers.get(place.id)?.click();
});
placeSearch.addEventListener('gmp-load',()=>{
voidaddMarkers();
});
searchPlaces();
}
// The searchPlaces function is called when the user changes the query input or when the page loads.
functionsearchPlaces(){
// Close the info window and clear the markers.
infoWindow.close();
for(constmarkerofmarkers.values()){
marker.remove();
}
markers.clear();
// Set the place search query and add an event listener to the place search element.
if(queryInput.value){
constcenter=map.center;
if(center){
placeSearchQuery.locationBias=center;
}
// The textQuery property is required for the search element to load.
// Any other configured properties will be ignored if textQuery is not set.
placeSearchQuery.textQuery=queryInput.value;
}
}
// The addMarkers function is called when the place search element loads.
asyncfunctionaddMarkers(){
// Import the necessary libraries from the Google Maps API.
const[{AdvancedMarkerElement},{LatLngBounds}]=awaitPromise.all([
google.maps.importLibrary('marker'),
google.maps.importLibrary('core'),
]);
constbounds=newLatLngBounds();
if(placeSearch.places.length===0){
return;
}
for(constplaceofplaceSearch.places){
if(!place.location){
continue;
}
constmarker=newAdvancedMarkerElement({
map:map.innerMap,
position:place.location,
collisionBehavior:'REQUIRED_AND_HIDES_OPTIONAL',
});
markers.set(place.id,marker);
bounds.extend(place.location);
marker.addListener('click',()=>{
placeRequest.place=place;
infoWindow.open(map.innerMap,marker);
});
}
map.innerMap.fitBounds(bounds);
}
voidinit();
index.js 

html,
body{
height:100%;
margin:0;
}
body{
display:flex;
flex-direction:column;
font-family:Arial,Helvetica,sans-serif;
}
.container{
display:flex;
height:100vh;
width:100%;
}
gmp-map{
flex-grow:1;
}
.ui-panel{
width:400px;
margin-left:20px;
margin-right:20px;
margin-top:10px;
overflow-y:auto;
font-family:Arial,Helvetica,sans-serif;
}
.list-container{
display:flex;
flex-direction:column;
}
gmp-place-search{
width:100%;
margin:0;
border:none;
color-scheme:light;
}
.query-input{
width:100%;
padding:8px;
margin-bottom:10px;
box-sizing:border-box;
}
.search-button{
width:100%;
padding:8px;
margin-bottom:10px;
box-sizing:border-box;
background-color:#1a73e8;
color:white;
border:none;
cursor:pointer;
}
.search-button:hover,
.search-button:focus-visible{
background-color:#1765cc;
}
style.css 

<!doctype html>
<html>
 <head>
 <title>Place Text Search with Google Maps</title>
 <meta charset="utf-8" />
 <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>
 <div class="container">
 <div class="ui-panel">
 <div class="controls">
 <input
 type="text"
 id="query-input"
 class="query-input"
 placeholder="Search for a place"
 value="cafe" />
 <button class="search-button">Search</button>
 </div>
 <div class="list-container">
 <gmp-place-search selectable>
 <gmp-place-all-content></gmp-place-all-content>
 <gmp-place-text-search-request
 max-result-count="5"></gmp-place-text-search-request>
 </gmp-place-search>
 </div>
 </div>
 <!-- map-id is required to use advanced markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
 <gmp-map center="-37.813,144.963" zoom="16" map-id="DEMO_MAP_ID">
 </gmp-map>
 </div>
 <!--
 The gmp-place-details-compact element is styled inline because it is
 conditionally rendered and moved into the info window, which is
 part of the map's shadow DOM.
 -->
 <gmp-place-details-compact
 orientation="horizontal"
 truncation-preferred
 style="
 width: 400px;
 padding: 0;
 margin: 0;
 border: none;
 background-color: transparent;
 color-scheme: light;
 ">
 <gmp-place-details-place-request></gmp-place-details-place-request>
 <gmp-place-content-config>
 <gmp-place-media></gmp-place-media>
 <gmp-place-rating></gmp-place-rating>
 <gmp-place-price></gmp-place-price>
 <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
 <gmp-place-open-now-status></gmp-place-open-now-status>
 <gmp-place-attribution
 light-scheme-color="gray"
 dark-scheme-color="white"></gmp-place-attribution>
 </gmp-place-content-config>
 </gmp-place-details-compact>
 </body>
</html>
index.html