This example uses searchNearby
to query for restaurants within a 500 meter
radius of the center, and populates a map with markers to show the results.
Read the documentation.
TypeScript
let map; async function initMap() { const { Map, InfoWindow } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary; let center = new google.maps.LatLng(52.369358, 4.889258); map = new Map(document.getElementById('map') as HTMLElement, { center: center, zoom: 11, mapId: 'DEMO_MAP_ID', }); nearbySearch(); } async function nearbySearch() { //@ts-ignore const { Place, SearchNearbyRankPreference } = await google.maps.importLibrary('places') as google.maps.PlacesLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // Restrict within the map viewport. let center = new google.maps.LatLng(52.369358, 4.889258); const request = { // required parameters fields: ['displayName', 'location', 'businessStatus'], locationRestriction: { center: center, radius: 500, }, // optional parameters includedPrimaryTypes: ['restaurant'], maxResultCount: 5, rankPreference: SearchNearbyRankPreference.POPULARITY, language: 'en-US', region: 'us', }; //@ts-ignore const { places } = await Place.searchNearby(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; async function initMap() { const { Map, InfoWindow } = await google.maps.importLibrary("maps"); let center = new google.maps.LatLng(52.369358, 4.889258); map = new Map(document.getElementById("map"), { center: center, zoom: 11, mapId: "DEMO_MAP_ID", }); nearbySearch(); } async function nearbySearch() { //@ts-ignore const { Place, SearchNearbyRankPreference } = await google.maps.importLibrary( "places", ); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // Restrict within the map viewport. let center = new google.maps.LatLng(52.369358, 4.889258); const request = { // required parameters fields: ["displayName", "location", "businessStatus"], locationRestriction: { center: center, radius: 500, }, // optional parameters includedPrimaryTypes: ["restaurant"], maxResultCount: 5, rankPreference: SearchNearbyRankPreference.POPULARITY, language: "en-US", region: "us", }; //@ts-ignore const { places } = await Place.searchNearby(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>Nearby 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: "beta"});</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-nearby-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.