Google Maps API Tutorials (JavaScript)

Nearby Search Places Google API JavaScript Example

Last modified on April 17th, 2023
Raja Tamil
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.

FREE 1-HOUR COURSE:
Vue JS & Google Maps API

ACCESS FREE COURSE NOW

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.

FREE 1-HOUR COURSE:
Vue JS & Google Maps API

ACCESS FREE COURSE NOW

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:

FREE 1-HOUR COURSE:
Vue JS & Google Maps API

ACCESS FREE COURSE NOW