Stay organized with collectionsSave and categorize content based on your preferences.
This example usessearchNearbyto query for restaurants within a 500 meter
radius of the center, and populates a map with markers to show the results.
Read thedocumentation.
TypeScript
letmap;asyncfunctioninitMap(){const{Map,InfoWindow}=awaitgoogle.maps.importLibrary('maps')asgoogle.maps.MapsLibrary;letcenter=newgoogle.maps.LatLng(52.369358,4.889258);map=newMap(document.getElementById('map')asHTMLElement,{center:center,zoom:11,mapId:'DEMO_MAP_ID',mapTypeControl:false,});nearbySearch();}asyncfunctionnearbySearch(){//@ts-ignoreconst{Place,SearchNearbyRankPreference}=awaitgoogle.maps.importLibrary('places')asgoogle.maps.PlacesLibrary;const{AdvancedMarkerElement}=awaitgoogle.maps.importLibrary("marker")asgoogle.maps.MarkerLibrary;// Restrict within the map viewport.letcenter=newgoogle.maps.LatLng(52.369358,4.889258);constrequest={// required parametersfields:['displayName','location','businessStatus'],locationRestriction:{center:center,radius:500,},// optional parametersincludedPrimaryTypes:['restaurant'],maxResultCount:5,rankPreference:SearchNearbyRankPreference.POPULARITY,language:'en-US',region:'us',};//@ts-ignoreconst{places}=awaitPlace.searchNearby(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;asyncfunctioninitMap(){const{Map,InfoWindow}=awaitgoogle.maps.importLibrary('maps');letcenter=newgoogle.maps.LatLng(52.369358,4.889258);map=newMap(document.getElementById('map'),{center:center,zoom:11,mapId:'DEMO_MAP_ID',mapTypeControl:false,});nearbySearch();}asyncfunctionnearbySearch(){//@ts-ignoreconst{Place,SearchNearbyRankPreference}=awaitgoogle.maps.importLibrary('places');const{AdvancedMarkerElement}=awaitgoogle.maps.importLibrary("marker");// Restrict within the map viewport.letcenter=newgoogle.maps.LatLng(52.369358,4.889258);constrequest={// required parametersfields:['displayName','location','businessStatus'],locationRestriction:{center:center,radius:500,},// optional parametersincludedPrimaryTypes:['restaurant'],maxResultCount:5,rankPreference:SearchNearbyRankPreference.POPULARITY,language:'en-US',region:'us',};//@ts-ignoreconst{places}=awaitPlace.searchNearby(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\u003eThis example demonstrates the use of \u003ccode\u003esearchNearby\u003c/code\u003e to locate restaurants within a 500-meter radius of a specified center point and displays them on a map using markers.\u003c/p\u003e\n"],["\u003cp\u003eThe provided code snippets include implementations in both TypeScript and JavaScript, showcasing how to integrate the Google Maps Places Library for nearby search functionality.\u003c/p\u003e\n"],["\u003cp\u003eUsers can explore the sample interactively through provided links to JSFiddle and Google Cloud Shell environments, or clone the sample code for local execution using Git and Node.js.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers are encouraged to refer to the documentation for detailed information on using the \u003ccode\u003esearchNearby\u003c/code\u003e function and TypeScript with Google Maps.\u003c/p\u003e\n"],["\u003cp\u003eAs an alternative approach, the Place Overview component from the Extended Component Library offers a pre-built UI for displaying detailed business information, which can be customized and embedded using the Place Overview configurator.\u003c/p\u003e\n"]]],["The code initializes a map centered at specific coordinates. It then uses `searchNearby` to find restaurants within a 500-meter radius of the center. The search request specifies restaurant criteria, limits results to five, and ranks by popularity. Found places are displayed as markers on the map, and the map's bounds are adjusted to fit all markers. The CSS sets the maps div to full screen and the HTML contains the necessary libraries and code to implement the previous code snippets.\n"],null,["This example uses `searchNearby` to query for restaurants within a 500 meter\nradius of the center, and populates a map with markers to show the results.\nRead the [documentation](/maps/documentation/javascript/nearby-search). \n\nTypeScript \n\n```typescript\nlet map;\n\nasync function initMap() {\n const { Map, InfoWindow } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary;\n\n let center = new google.maps.LatLng(52.369358, 4.889258);\n\n map = new Map(document.getElementById('map') as HTMLElement, {\n center: center,\n zoom: 11,\n mapId: 'DEMO_MAP_ID',\n mapTypeControl: false,\n });\n nearbySearch();\n}\n\nasync function nearbySearch() {\n //@ts-ignore\n const { Place, SearchNearbyRankPreference } = await google.maps.importLibrary('places') as google.maps.PlacesLibrary;\n const { AdvancedMarkerElement } = await google.maps.importLibrary(\"marker\") as google.maps.MarkerLibrary;\n\n // Restrict within the map viewport.\n let center = new google.maps.LatLng(52.369358, 4.889258);\n\n const request = {\n // required parameters\n fields: ['displayName', 'location', 'businessStatus'],\n locationRestriction: {\n center: center,\n radius: 500, \n },\n // optional parameters\n includedPrimaryTypes: ['restaurant'],\n maxResultCount: 5,\n rankPreference: SearchNearbyRankPreference.POPULARITY,\n language: 'en-US',\n region: 'us',\n };\n\n //@ts-ignore\n const { places } = await Place.searchNearby(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-samples/js-api-samples/blob/7a62b25fe463fc0fd06949fcd1029aecc8b8504b/samples/place-nearby-search/index.ts#L8-L77\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\nJavaScript \n\n```javascript\nlet map;\nasync function initMap() {\n const { Map, InfoWindow } = await google.maps.importLibrary('maps');\n let center = new google.maps.LatLng(52.369358, 4.889258);\n map = new Map(document.getElementById('map'), {\n center: center,\n zoom: 11,\n mapId: 'DEMO_MAP_ID',\n mapTypeControl: false,\n });\n nearbySearch();\n}\nasync function nearbySearch() {\n //@ts-ignore\n const { Place, SearchNearbyRankPreference } = await google.maps.importLibrary('places');\n const { AdvancedMarkerElement } = await google.maps.importLibrary(\"marker\");\n // Restrict within the map viewport.\n let center = new google.maps.LatLng(52.369358, 4.889258);\n const request = {\n // required parameters\n fields: ['displayName', 'location', 'businessStatus'],\n locationRestriction: {\n center: center,\n radius: 500,\n },\n // optional parameters\n includedPrimaryTypes: ['restaurant'],\n maxResultCount: 5,\n rankPreference: SearchNearbyRankPreference.POPULARITY,\n language: 'en-US',\n region: 'us',\n };\n //@ts-ignore\n const { places } = await Place.searchNearby(request);\n if (places.length) {\n console.log(places);\n const { LatLngBounds } = await google.maps.importLibrary(\"core\");\n const bounds = new LatLngBounds();\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 bounds.extend(place.location);\n console.log(place);\n });\n map.fitBounds(bounds);\n }\n else {\n console.log(\"No results\");\n }\n}\ninitMap();https://github.com/googlemaps-samples/js-api-samples/blob/7a62b25fe463fc0fd06949fcd1029aecc8b8504b/dist/samples/place-nearby-search/docs/index.js#L8-L64\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-samples/js-api-samples/blob/7a62b25fe463fc0fd06949fcd1029aecc8b8504b/dist/samples/place-nearby-search/docs/style.css#L7-L24\n```\n\nHTML \n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003eNearby 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: \"AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8\", v: \"beta\"});\u003c/script\u003e\n \u003c/body\u003e\n\u003c/html\u003ehttps://github.com/googlemaps-samples/js-api-samples/blob/7a62b25fe463fc0fd06949fcd1029aecc8b8504b/dist/samples/place-nearby-search/docs/index.html#L8-L22\n```\n\nTry Sample \n[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps-samples/js-api-samples/tree/main/dist/samples/place-nearby-search/jsfiddle)\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 https://github.com/googlemaps-samples/js-api-samples.git\n cd samples/place-nearby-search\n npm i\n npm start"]]
