Nearby Search Places Google API JavaScript Example

Nearby Search Request is part of the Google Places API Library in addition to Text Search Request and Place Details Request.

It allows us to search for different types of places such as restaurants, grocery stores, etc based on specific location and its proximity.

For Example: If you want to find restaurants within 5 km of your current location, you can totally do that using Nearby Search Request.

Nearby Search Base HTTP Interface URL

https://maps.googleapis.com/maps/api/place/nearbysearch/

Nearby Search Request URL Route Parameter (Required)

Nearby Search Request URL Query Parameters (Required)

Create Google Maps API KEY

1. Log in to Google Cloud Platform

2. Then, go to Select a project ▾ drop-down menu which will open up a dialog box with your existing projects if any. Choose the one that you want to obtain an API key from.

3. Otherwise, create a new project by clicking the NEW PROJECT button at the top right of the dialog box.

4. Once the project is selected, go to the Navigation Menu button at the top left of the page, choose APIs & Services → Credentials

5. Select Create Credentials → API Key which will open up a dialog box with your API Key. 

That’s it… you have it! 

Enable Maps JavaScript API & Places API

1. Go to APIs & Services → Dashboard → Enable APIs & Services at the top and Choose Maps JavaScrip API from the API Library. This will open up the Map JavaScript API page, and Enable it.

2. Scroll down to the bottom of the page and you can find Places API under the “More Solutions to Explore” section and Enable it as well.

Make An HTTP Request to Nearby Search API

const URL = "https://maps.googleapis.com/maps/api/place/nearbysearch/json?key=[YOUR_API_KEY]&location=-33.8670522,151.1957362&radius=5000&type=restaurant";

fetch(URL).then(data=> {
  return data.json()
}).then(jsonData => {
 console.log(jsonData.results)
}).catch(error=> {
  console.log(error);
}) 

There are a few ways to fix CORS Error and the quickest way to append proxy server URL to the Google Maps Base URL.

const URL = "https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api/place/nearbysearch/json?key=[YOUR_API_KEY]&location=-33.8670522,151.1957362&radius=5000&type=restaurant";

fetch(URL).then(data=> {
  return data.json()
}).then(jsonData => {
 console.log(jsonData.results)
}).catch(error=> {
  console.log(error);
}) 

Nearby Search Response JSON Object

Once the request is complete, it will return a response object in a JSON format like the screenshot below and it will have 20 places inside the results array.

Nearby Search Request Get Next 20 Places

As you know, Nearby Search Request gives you only 20 results in the response object per request.

To get the next 20 results, we’ll need to add an additional query parameter called pagetoken to the URL.

And the value of this param can be found in the previous response object under the property called next_page_token like the image below.

So the sample request URL would be like this.

https://maps.googleapis.com/maps/api/place/nearbysearch/json?key=[YOURAPIKEY]&location=-33.8670522,151.1957362&radius=5000&type=restaurant&pagetoken=CqQCFQEAAKQ48fsO4kjIu

You can get the maximum of 60 places using Nearby Search Request.

Recommended:

• Google Places API Text Search
• Google Places API Place Details
• Google Maps Geocoding API Explained [2022]
• Vue.js + Places API: Build A Nearby Locations App
• Get User Location Using HTML5 Geolocation API