Google Maps Places API ← JavaScript
If you want to get all of the restaurant data from a specific city by text search in your application, you have come to the right place.
In this tutorial, you’re going to learn how to do exactly that using Google Maps Places API. Also, I will be covering how to get more information about a specific restaurant using place_id.
STEP #1: Get the 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! 🙂
STEP #2: Make A Request On Places API
1. Here is the base URL for Places API
https://maps.googleapis.com/maps/api/place/textsearch/jsonAll you need is two query parameters in order to get this working, these are:
- query: The actual text string that you want to get search results for. (For example, restaurants in Toronto)
- key: API key that you have obtained from the previous section.
So, the final URL with query parameters will look like this:
https://maps.googleapis.com/maps/api/place/textsearch/json?query=[yourquerystring]&key=[YOURAPIKEY]Don’t forget to replace with your text string and API key.
If you send a GET request from the browser at this stage, you may get an unauthorized API error.
This is because you will need to Enabled Maps JavaScript API as well as Places API.
STEP #3: 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.
STEP #4: Get Restaurants Data
Let’s say you want to get the first 20 restaurants from Toronto. Your request would look like this:
https://maps.googleapis.com/maps/api/place/textsearch/json?query=restaurants+toronto+canada&key=YOURAPIKEYThe response JSON object will have 20 restaurants like in the screenshot below.
Install JSON Formatter which is a chrome extension that will help to format JSON object.
STEP #5: Get Restaurant Details Data Using Place_id
Here is the Base URL:
https://maps.googleapis.com/maps/api/place/details/jsonAs you can see, I have passed three query parameters for this request.
https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJKSp50NI0K4gR6C6L3yYqpYY&fields=name&key=YOURKEY- placeid: This can be found in the previous request JSON Object with the property name place_id.
- key: Your API Key.
- fields: Multiple values can be passed by commas and I have just a name field for now.
Some of the useful fields are as follows: name, rating, formatted_address, type, geometry, formatted_phone_number, opening_hours and more.
Here is the sample JSON response for the detailed request.
Recommended
How To Add Google Places Autocomplete To An Input Field