Page Summary
-
The sample demonstrates using the
searchByTextfunction 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
let map ; let markers = {}; let infoWindow ; async function initMap () { const { Map , InfoWindow } = ( await google . maps . importLibrary ( 'maps' )) as google . maps . MapsLibrary ; const center = { lat : 37.4161493 , lng : - 122.0812166 }; map = new Map ( document . getElementById ( 'map' ) as HTMLElement , { center : center , zoom : 11 , mapTypeControl : false , mapId : 'DEMO_MAP_ID' , }); const textInput = document . getElementById ( 'text-input' ) as HTMLInputElement ; const textInputButton = document . getElementById ( 'text-input-button' ) as HTMLButtonElement ; const card = document . getElementById ( 'text-input-card' ) as HTMLElement ; 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 = new google . maps . InfoWindow (); } async function findPlaces ( query ) { const { Place } = ( await google . maps . importLibrary ( 'places' )) as google . maps . PlacesLibrary ; const { AdvancedMarkerElement } = ( await google . maps . importLibrary ( 'marker' )) as google . maps . MarkerLibrary ; const request = { 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 } = await Place . searchByText ( request ); if ( places . length ) { const { LatLngBounds } = ( await google . maps . importLibrary ( 'core' )) as google . maps . CoreLibrary ; const bounds = new LatLngBounds (); // First remove all existing markers. for ( const id in markers ) { markers [ id ]. map = null ; } markers = {}; // Loop through and get all the results. places . forEach (( place ) = > { const marker = new AdvancedMarkerElement ({ 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. async function updateInfoWindow ( title , content , anchor ) { infoWindow . setContent ( content ); infoWindow . setHeaderContent ( title ); infoWindow . open ({ map , anchor , shouldFocus : false , }); } initMap ();
JavaScript
let map ; let markers = {}; let infoWindow ; async function initMap () { const { Map , InfoWindow } = ( await google . maps . importLibrary ( 'maps' )); const center = { lat : 37.4161493 , lng : - 122.0812166 }; map = new Map ( document . getElementById ( 'map' ), { center : center , zoom : 11 , mapTypeControl : false , mapId : 'DEMO_MAP_ID' , }); const textInput = document . getElementById ( 'text-input' ); const textInputButton = document . getElementById ( 'text-input-button' ); const card = 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 = new google . maps . InfoWindow (); } async function findPlaces ( query ) { const { Place } = ( await google . maps . importLibrary ( 'places' )); const { AdvancedMarkerElement } = ( await google . maps . importLibrary ( 'marker' )); const request = { 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 } = await Place . searchByText ( request ); if ( places . length ) { const { LatLngBounds } = ( await google . maps . importLibrary ( 'core' )); const bounds = new LatLngBounds (); // First remove all existing markers. for ( const id in markers ) { markers [ id ]. map = null ; } markers = {}; // Loop through and get all the results. places . forEach (( place ) = > { const marker = new AdvancedMarkerElement ({ 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. async function updateInfoWindow ( title , content , anchor ) { infoWindow . setContent ( content ); infoWindow . setHeaderContent ( title ); infoWindow . open ({ map , anchor , shouldFocus : false , }); } initMap ();
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 : 5 px ; box-shadow : rgba ( 0 , 0 , 0 , 0.35 ) 0 px 5 px 15 px ; margin : 10 px ; padding : 5 px ; font-family : Roboto , sans-serif ; font-size : large ; font-weight : bold ; } # text-input { width : 100 % ; padding : 10 px ; margin : 0 ; box-sizing : border-box ; } # text-input-button { display : inline-block ; margin-top : 0.5 rem ; width : auto ; padding : 0.6 rem 0.75 rem ; font-size : 0.875 rem ; font-weight : 500 ; color : #fff ; background-color : #2563eb ; border : none ; border-radius : 0.375 rem ; cursor : pointer ; transition : background-color 0.15 s ease-in-out ; text-align : center ; }
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>
Try Sample
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.
git clone https : //github.com/googlemaps-samples/js-api-samples.gitcd samples / place - text - searchnpm inpm start
