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 center; async function initMap() { const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; center = { lat: 37.4161493, lng: -122.0812166 }; map = new Map(document.getElementById('map') as HTMLElement, { center: center, zoom: 11, mapId: 'DEMO_MAP_ID', }); findPlaces(); } async function findPlaces() { 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: '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-ignore const { places } = await Place.searchByText(request); if (places.length) { console.log(places); const { LatLngBounds } = await google.maps.importLibrary("core") as google.maps.CoreLibrary; const bounds = new LatLngBounds(); // Loop through and get all the results. places.forEach((place) => { const markerView = new AdvancedMarkerElement({ map, position: place.location, title: place.displayName, }); bounds.extend(place.location as google.maps.LatLng); console.log(place); }); map.fitBounds(bounds); } else { console.log('No results'); } } initMap();
JavaScript
let map; let center; async function initMap() { const { Map } = await google.maps.importLibrary("maps"); center = { lat: 37.4161493, lng: -122.0812166 }; map = new Map(document.getElementById("map"), { center: center, zoom: 11, mapId: "DEMO_MAP_ID", }); findPlaces(); } async function findPlaces() { const { Place } = await google.maps.importLibrary("places"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); const request = { 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-ignore const { places } = await Place.searchByText(request); if (places.length) { console.log(places); const { LatLngBounds } = await google.maps.importLibrary("core"); const bounds = new LatLngBounds(); // Loop through and get all the results. places.forEach((place) => { const markerView = new AdvancedMarkerElement({ map, position: place.location, title: place.displayName, }); bounds.extend(place.location); console.log(place); }); map.fitBounds(bounds); } else { console.log("No results"); } } 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; }
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="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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", 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 -b sample-place-text-search https://github.com/googlemaps/js-samples.git
cd js-samples
npm i
npm start
Other samples can be tried by switching to any branch beginning with sample-SAMPLE_NAME
.
git checkout sample-SAMPLE_NAME
npm i
npm start
Use the Place Overview component
The Place Overview component displays detailed information about millions of businesses, including opening hours, star reviews, and photos, plus directions and other actions in a premade UI in 5 sizes and formats. It is part of the Extended Component Library, from Google Maps Platform, a set of web components that helps developers build better maps and location features faster.
Use the Place Overview configurator to create embeddable code for a custom Place Overview component, then export it to be used with popular frameworks like React and Angular or no framework at all.