Google Maps API Tutorials (JavaScript)

Google Places API Nearby Search JavaScript Example [2022]

Last modified on June 12th, 2022
Google Maps API Javascript

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)

namedescription
JSON or XMLOutput format (json recommended)

Nearby Search Request URL Query Parameters (Required)

namedescription
keyYour API Key from Google Cloud Platform.
locationThe value must be specified in the format of latitude, longitude.
radiusSpecify in meters. i.e. 5000 = 5KM
typeThis could be a restaurant, bar, etc. full list here.

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:

Hey, Like what you're reading? Check this out!

🔥 9,134+ students already enrolled!
4.6 ⭐️⭐️⭐️⭐️⭐️ (145+ ratings) BEST SELLER