Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share your input on your UI Kit experience.

Place Text Search

Spark icon

Page Summary

The sample demonstrates using the searchByText function to find taco restaurants near Mountain View, California.
It displays the search results as markers on a map, automatically adjusting the map's view to encompass all found locations.
The sample code is provided in both TypeScript and JavaScript, showcasing how to integrate Google Maps Platform functionalities into your web application.
Users can further explore the functionality by cloning the sample code and running it locally using Git and Node.js or by trying it on JSFiddle or Google Cloud Shell.
As an alternative, consider utilizing the Place Overview component from the Extended Component Library for a pre-built user interface to display detailed place information.

This example uses searchByText to query for taco restaurants in the Mountain View vicinity, and populates a map with markers to show the results.

Read the documentation.

[フレーム]

TypeScript

letmap;
letmarkers={};
letinfoWindow;
asyncfunctioninitMap(){
const{Map,InfoWindow}=(awaitgoogle.maps.importLibrary(
'maps'
))asgoogle.maps.MapsLibrary;
constcenter={lat:37.4161493,lng:-122.0812166};
map=newMap(document.getElementById('map')asHTMLElement,{
center:center,
zoom:11,
mapTypeControl:false,
mapId:'DEMO_MAP_ID',
});
consttextInput=document.getElementById('text-input')asHTMLInputElement;
consttextInputButton=document.getElementById(
'text-input-button'
)asHTMLButtonElement;
constcard=document.getElementById('text-input-card')asHTMLElement;
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
textInputButton.addEventListener('click',()=>{
findPlaces(textInput.value);
});
textInput.addEventListener('keydown',(event)=>{
if(event.key==='Enter'){
findPlaces(textInput.value);
}
});
infoWindow=newgoogle.maps.InfoWindow();
}
asyncfunctionfindPlaces(query){
const{Place}=(awaitgoogle.maps.importLibrary(
'places'
))asgoogle.maps.PlacesLibrary;
const{AdvancedMarkerElement}=(awaitgoogle.maps.importLibrary(
'marker'
))asgoogle.maps.MarkerLibrary;
constrequest={
textQuery:query,
fields:['displayName','location','businessStatus'],
includedType:'',// Restrict query to a specific type (leave blank for any).
useStrictTypeFiltering:true,
locationBias:map.center,
isOpenNow:true,
language:'en-US',
maxResultCount:8,
minRating:1,// Specify a minimum rating.
region:'us',
};
const{places}=awaitPlace.searchByText(request);
if(places.length){
const{LatLngBounds}=(awaitgoogle.maps.importLibrary(
'core'
))asgoogle.maps.CoreLibrary;
constbounds=newLatLngBounds();
// First remove all existing markers.
for(constidinmarkers){
markers[id].map=null;
}
markers={};
// Loop through and get all the results.
places.forEach((place)=>{
constmarker=newAdvancedMarkerElement({
map,
position:place.location,
title:place.displayName,
});
markers[place.id]=marker;
marker.addListener('gmp-click',()=>{
map.panTo(place.location);
updateInfoWindow(place.displayName,place.id,marker);
});
if(place.location!=null){
bounds.extend(place.location);
}
});
map.fitBounds(bounds);
}else{
console.log('No results');
}
}
// Helper function to create an info window.
asyncfunctionupdateInfoWindow(title,content,anchor){
infoWindow.setContent(content);
infoWindow.setHeaderContent(title);
infoWindow.open({
map,
anchor,
shouldFocus:false,
});
}
initMap();index.ts

JavaScript

letmap;
letmarkers={};
letinfoWindow;
asyncfunctioninitMap(){
const{Map,InfoWindow}=(awaitgoogle.maps.importLibrary('maps'));
constcenter={lat:37.4161493,lng:-122.0812166};
map=newMap(document.getElementById('map'),{
center:center,
zoom:11,
mapTypeControl:false,
mapId:'DEMO_MAP_ID',
});
consttextInput=document.getElementById('text-input');
consttextInputButton=document.getElementById('text-input-button');
constcard=document.getElementById('text-input-card');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
textInputButton.addEventListener('click',()=>{
findPlaces(textInput.value);
});
textInput.addEventListener('keydown',(event)=>{
if(event.key==='Enter'){
findPlaces(textInput.value);
}
});
infoWindow=newgoogle.maps.InfoWindow();
}
asyncfunctionfindPlaces(query){
const{Place}=(awaitgoogle.maps.importLibrary('places'));
const{AdvancedMarkerElement}=(awaitgoogle.maps.importLibrary('marker'));
constrequest={
textQuery:query,
fields:['displayName','location','businessStatus'],
includedType:'',// Restrict query to a specific type (leave blank for any).
useStrictTypeFiltering:true,
locationBias:map.center,
isOpenNow:true,
language:'en-US',
maxResultCount:8,
minRating:1,// Specify a minimum rating.
region:'us',
};
const{places}=awaitPlace.searchByText(request);
if(places.length){
const{LatLngBounds}=(awaitgoogle.maps.importLibrary('core'));
constbounds=newLatLngBounds();
// First remove all existing markers.
for(constidinmarkers){
markers[id].map=null;
}
markers={};
// Loop through and get all the results.
places.forEach((place)=>{
constmarker=newAdvancedMarkerElement({
map,
position:place.location,
title:place.displayName,
});
markers[place.id]=marker;
marker.addListener('gmp-click',()=>{
map.panTo(place.location);
updateInfoWindow(place.displayName,place.id,marker);
});
if(place.location!=null){
bounds.extend(place.location);
}
});
map.fitBounds(bounds);
}
else{
console.log('No results');
}
}
// Helper function to create an info window.
asyncfunctionupdateInfoWindow(title,content,anchor){
infoWindow.setContent(content);
infoWindow.setHeaderContent(title);
infoWindow.open({
map,
anchor,
shouldFocus:false,
});
}
initMap();index.js

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;
}
#text-input-card{
width:25%;
background-color:#fff;
border-radius:5px;
box-shadow:rgba(0,0,0,0.35)0px5px15px;
margin:10px;
padding:5px;
font-family:Roboto,sans-serif;
font-size:large;
font-weight:bold;
}
#text-input{
width:100%;
padding:10px;
margin:0;
box-sizing:border-box;
}
#text-input-button{
display:inline-block;
margin-top:0.5rem;
width:auto;
padding:0.6rem0.75rem;
font-size:0.875rem;
font-weight:500;
color:#fff;
background-color:#2563eb;
border:none;
border-radius:0.375rem;
cursor:pointer;
transition:background-color0.15sease-in-out;
text-align:center;
}
style.css

HTML

<html>
 <head>
 <title>Text Search</title>
 <link rel="stylesheet" type="text/css" href="./style.css" />
 <script type="module" src="./index.js"></script>
 </head>
 <body>
 <div id="text-input-card">
 <input
 type="text"
 id="text-input"
 placeholder="Search for a place" />
 <input type="button" id="text-input-button" value="Search" />
 </div>
 <div id="map"></div>
 <!-- prettier-ignore -->
 <script>(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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
 </body>
</html>index.html

Try Sample

JSFiddle.net

Clone Sample

Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.

gitclonehttps://github.com/googlemaps-samples/js-api-samples.git
cdsamples/place-text-search
npmi
npmstart