letmap;letcenter;asyncfunctioninitMap(){const{Map}=awaitgoogle.maps.importLibrary("maps")asgoogle.maps.MapsLibrary;center={lat:37.4161493,lng:-122.0812166};map=newMap(document.getElementById('map')asHTMLElement,{center:center,zoom:11,mapId:'DEMO_MAP_ID',});findPlaces();}asyncfunctionfindPlaces(){const{Place}=awaitgoogle.maps.importLibrary("places")asgoogle.maps.PlacesLibrary;const{AdvancedMarkerElement}=awaitgoogle.maps.importLibrary("marker")asgoogle.maps.MarkerLibrary;constrequest={textQuery:'Tacos in Mountain View',fields:['displayName','location','businessStatus'],includedType:'restaurant',locationBias:{lat:37.4161493,lng:-122.0812166},isOpenNow:true,language:'en-US',maxResultCount:8,minRating:3.2,region:'us',useStrictTypeFiltering:false,};//@ts-ignoreconst{places}=awaitPlace.searchByText(request);if(places.length){console.log(places);const{LatLngBounds}=awaitgoogle.maps.importLibrary("core")asgoogle.maps.CoreLibrary;constbounds=newLatLngBounds();// Loop through and get all the results.places.forEach((place)=>{constmarkerView=newAdvancedMarkerElement({map,position:place.location,title:place.displayName,});bounds.extend(place.locationasgoogle.maps.LatLng);console.log(place);});map.fitBounds(bounds);}else{console.log('No results');}}initMap();
letmap;letcenter;asyncfunctioninitMap(){const{Map}=awaitgoogle.maps.importLibrary("maps");center={lat:37.4161493,lng:-122.0812166};map=newMap(document.getElementById("map"),{center:center,zoom:11,mapId:"DEMO_MAP_ID",});findPlaces();}asyncfunctionfindPlaces(){const{Place}=awaitgoogle.maps.importLibrary("places");const{AdvancedMarkerElement}=awaitgoogle.maps.importLibrary("marker");constrequest={textQuery:"Tacos in Mountain View",fields:["displayName","location","businessStatus"],includedType:"restaurant",locationBias:{lat:37.4161493,lng:-122.0812166},isOpenNow:true,language:"en-US",maxResultCount:8,minRating:3.2,region:"us",useStrictTypeFiltering:false,};//@ts-ignoreconst{places}=awaitPlace.searchByText(request);if(places.length){console.log(places);const{LatLngBounds}=awaitgoogle.maps.importLibrary("core");constbounds=newLatLngBounds();// Loop through and get all the results.places.forEach((place)=>{constmarkerView=newAdvancedMarkerElement({map,position:place.location,title:place.displayName,});bounds.extend(place.location);console.log(place);});map.fitBounds(bounds);}else{console.log("No results");}}initMap();
/** 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;}
Git and Node.js are required to run this sample locally. Follow theseinstructionsto install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-09-04 UTC."],[[["\u003cp\u003eThe sample demonstrates using the \u003ccode\u003esearchByText\u003c/code\u003e function to find taco restaurants near Mountain View, California.\u003c/p\u003e\n"],["\u003cp\u003eIt displays the search results as markers on a map, automatically adjusting the map's view to encompass all found locations.\u003c/p\u003e\n"],["\u003cp\u003eThe sample code is provided in both TypeScript and JavaScript, showcasing how to integrate Google Maps Platform functionalities into your web application.\u003c/p\u003e\n"],["\u003cp\u003eUsers 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.\u003c/p\u003e\n"],["\u003cp\u003eAs an alternative, consider utilizing the Place Overview component from the Extended Component Library for a pre-built user interface to display detailed place information.\u003c/p\u003e\n"]]],["The code initializes a Google Map centered on Mountain View. It uses `searchByText` to find taco restaurants within that area, filtering results to only include open restaurants, with a minimum rating of 3.2. Up to 8 results are displayed. Markers are added to the map for each found location, and the map bounds are adjusted to encompass all markers. The HTML, CSS files set up the page structure and map's style.\n"],null,["This example uses `searchByText` to query for taco restaurants in the Mountain\nView vicinity, and populates a map with markers to show the results.\n\nRead the [documentation](/maps/documentation/javascript/place-search). \n\nTypeScript \n\n```typescript\nlet map;\nlet center;\n\nasync function initMap() {\n const { Map } = await google.maps.importLibrary(\"maps\") as google.maps.MapsLibrary;\n\n center = { lat: 37.4161493, lng: -122.0812166 };\n map = new Map(document.getElementById('map') as HTMLElement, {\n center: center,\n zoom: 11,\n mapId: 'DEMO_MAP_ID',\n });\n\n findPlaces();\n}\n\nasync function findPlaces() {\n const { Place } = await google.maps.importLibrary(\"places\") as google.maps.PlacesLibrary;\n const { AdvancedMarkerElement } = await google.maps.importLibrary(\"marker\") as google.maps.MarkerLibrary;\n const request = {\n textQuery: 'Tacos in Mountain View',\n fields: ['displayName', 'location', 'businessStatus'],\n includedType: 'restaurant',\n locationBias: { lat: 37.4161493, lng: -122.0812166 },\n isOpenNow: true,\n language: 'en-US',\n maxResultCount: 8,\n minRating: 3.2,\n region: 'us',\n useStrictTypeFiltering: false,\n };\n\n //@ts-ignore\n const { places } = await Place.searchByText(request);\n\n if (places.length) {\n console.log(places);\n\n const { LatLngBounds } = await google.maps.importLibrary(\"core\") as google.maps.CoreLibrary;\n const bounds = new LatLngBounds();\n\n // Loop through and get all the results.\n places.forEach((place) =\u003e {\n const markerView = new AdvancedMarkerElement({\n map,\n position: place.location,\n title: place.displayName,\n });\n\n bounds.extend(place.location as google.maps.LatLng);\n console.log(place);\n });\n\n map.fitBounds(bounds);\n\n } else {\n console.log('No results');\n }\n}\n\ninitMap();https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/samples/place-text-search/index.ts#L9-L71\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\nJavaScript \n\n```javascript\nlet map;\nlet center;\n\nasync function initMap() {\n const { Map } = await google.maps.importLibrary(\"maps\");\n\n center = { lat: 37.4161493, lng: -122.0812166 };\n map = new Map(document.getElementById(\"map\"), {\n center: center,\n zoom: 11,\n mapId: \"DEMO_MAP_ID\",\n });\n findPlaces();\n}\n\nasync function findPlaces() {\n const { Place } = await google.maps.importLibrary(\"places\");\n const { AdvancedMarkerElement } = await google.maps.importLibrary(\"marker\");\n const request = {\n textQuery: \"Tacos in Mountain View\",\n fields: [\"displayName\", \"location\", \"businessStatus\"],\n includedType: \"restaurant\",\n locationBias: { lat: 37.4161493, lng: -122.0812166 },\n isOpenNow: true,\n language: \"en-US\",\n maxResultCount: 8,\n minRating: 3.2,\n region: \"us\",\n useStrictTypeFiltering: false,\n };\n //@ts-ignore\n const { places } = await Place.searchByText(request);\n\n if (places.length) {\n console.log(places);\n\n const { LatLngBounds } = await google.maps.importLibrary(\"core\");\n const bounds = new LatLngBounds();\n\n // Loop through and get all the results.\n places.forEach((place) =\u003e {\n const markerView = new AdvancedMarkerElement({\n map,\n position: place.location,\n title: place.displayName,\n });\n\n bounds.extend(place.location);\n console.log(place);\n });\n map.fitBounds(bounds);\n } else {\n console.log(\"No results\");\n }\n}\n\ninitMap();https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/place-text-search/docs/index.js#L7-L65\n```\n| **Note:** The JavaScript is compiled from the TypeScript snippet.\n\nCSS \n\n```css\n/* \n * Always set the map height explicitly to define the size of the div element\n * that contains the map. \n */\n#map {\n height: 100%;\n}\n\n/* \n * Optional: Makes the sample page fill the window. \n */\nhtml,\nbody {\n height: 100%;\n margin: 0;\n padding: 0;\n}\nhttps://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/place-text-search/docs/style.css#L7-L24\n```\n\nHTML \n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003eText Search\u003c/title\u003e\n\n \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"./style.css\" /\u003e\n \u003cscript type=\"module\" src=\"./index.js\"\u003e\u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cdiv id=\"map\"\u003e\u003c/div\u003e\n\n \u003c!-- prettier-ignore --\u003e\n \u003cscript\u003e(g=\u003e{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=()=\u003eh||(h=new Promise(async(f,n)=\u003e{await (a=m.createElement(\"script\"));e.set(\"libraries\",[...r]+\"\");for(k in g)e.set(k.replace(/[A-Z]/g,t=\u003e\"_\"+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=()=\u003eh=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)=\u003er.add(f)&&u().then(()=\u003ed[l](f,...n))})\n ({key: \"AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg\", v: \"weekly\"});\u003c/script\u003e\n \u003c/body\u003e\n\u003c/html\u003ehttps://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/place-text-search/docs/index.html#L8-L22\n```\n\nTry Sample \n[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/place-text-search/jsfiddle) [Google Cloud Shell](https://ssh.cloud.google.com/cloudshell/editor?cloudshell_git_repo=https%3A%2F%2Fgithub.com%2Fgooglemaps%2Fjs-samples&cloudshell_git_branch=sample-place-text-search&cloudshell_tutorial=cloud_shell_instructions.md&cloudshell_workspace=.)\n\nClone Sample\n\n\nGit and Node.js are required to run this sample locally. Follow these [instructions](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) to install Node.js and NPM. The following commands clone, install dependencies and start the sample application. \n\n git clone -b sample-place-text-search https://github.com/googlemaps/js-samples.git\n cd js-samples\n npm i\n npm start\n\n\nOther samples can be tried by switching to any branch beginning with `sample-`\u003cvar translate=\"no\"\u003eSAMPLE_NAME\u003c/var\u003e. \n\n git checkout sample-\u003cvar translate=\"no\"\u003e\u003cspan class=\"devsite-syntax-nx\"\u003eSAMPLE_NAME\u003c/span\u003e\u003c/var\u003e\n npm i\n npm start"]]
