• Home
  • Categories
  • Video Tutorials
    • Angular 5
  • News
  • About us
  • Contact us
  • Login
test
Code4Developers

Code4Developers

Code4Developers
  • Home
  • Categories
  • Video Tutorials
    • Angular 5
  • News
  • About us
  • Contact us
  • Login
  • Cloud
  • JavaScript

Getting started with Google Maps Places API

  • Arif Khoja
  • October 17, 2019
  • 2 minute read
places-api
Total
0
Shares
0
0
0

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

google-cloud-platform-console

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.

create-a-new-project-google-cloud-platform

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

apiservices-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

http://maps.googleapis.com/maps/api/place/textsearch/json

All you need is two query parameters in order 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:

http://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.

api-project-is-not-authorized

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 Map JavaScript API page and Enable it.

enable-maps-javascript-api

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=YOURAPIKEY

The response JSON object will have 20 restaurants like the screenshot below.

Screen-Shot-2019-08-21-at-11.09.03-AM

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/json

As 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
    1. placeid: This can be found the previous request JSON Object with the property name place_id.
    2. key: Your API Key.
    3. 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 details request.

places-api-details-json-response

There you have it 🙂

Sharing is caring!

Arif Khoja
Arif Khoja

Arif Khoja is a Developer. He is a Javascript Enthusiatic who loves logical programming and has first hand experience in building a cutting edge internet product using Angular. He is also an open source freak and keen about learning and sharing. He writes Javascript both frontend and backend. He loves learning and sharing tech all the time. He also has a hands on experience in SEO and writes articles about latest emerging technologies.

Views: 3,552

Share this:

  • Click to share on Facebook (Opens in new window) Facebook
  • Click to share on WhatsApp (Opens in new window) WhatsApp
  • Click to share on LinkedIn (Opens in new window) LinkedIn
  • Click to share on X (Opens in new window) X
  • Click to share on Pinterest (Opens in new window) Pinterest
  • Click to email a link to a friend (Opens in new window) Email
  • Click to print (Opens in new window) Print

Like this:

Like Loading...

Related Posts

Total
0
Shares
Share 0
Tweet 0
Pin it 0

Leave a ReplyCancel reply

Subscribe to Website via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Recent Posts
  • React Hooks Guide: Top Tips for Optimizing Performance in Your React Applications

    React Hooks Guide: Top Tips for Optimizing Performance in Your React Applications

    1 year ago
  • Demystifying JavaScript Tree Shaking: Boosting Performance and Reducing Bundle Size

    Demystifying JavaScript Tree Shaking: Boosting Performance and Reducing Bundle Size

    2 years ago
  • Unlocking the Power of React Hooks: A Comprehensive Guide with Examples

    Unlocking the Power of React Hooks: A Comprehensive Guide with Examples

    2 years ago
  • Celebrating a Decade of Phenomenal Growth: Insights and Reflections on 10 Years of Software Engineering

    Celebrating a Decade of Phenomenal Growth: Insights and Reflections on 10 Years of Software Engineering

    2 years ago
  • Angular Custom Elements: Creating Reusable Components with Angular

    Angular Custom Elements: Creating Reusable Components with Angular

    2 years ago
  • Connect Firebase Realtime NoSQL Database with Angular App from Scratch

    Connect Firebase Realtime NoSQL Database with Angular App from Scratch

    5 years ago
  • How to Build an Inclusive Esports Community

    How to Build an Inclusive Esports Community

    5 years ago
  • Best Digital Icebreakers

    Best Digital Icebreakers

    5 years ago
  • Email alerts when a docker container stopped in AWS ECS CLUSTER

    Email alerts when a docker container stopped in AWS ECS CLUSTER

    5 years ago
  • New Learning Models for Fall 2020

    New Learning Models for Fall 2020

    5 years ago
Subscribe to Website via Email

Enter your email address to subscribe to this website and receive notifications of new posts by email.

Featured Posts
  • javascript 1
    Spread syntax (three dots) in JavaScript
    • March 21, 2018
  • Angular 2
    Angular 6 CRUD – Part 1: Project Setup, Routing, Service
    • May 9, 2018
  • javascript 3
    Local Storage and Session Storage
    • May 22, 2017
  • Angular 4
    Angular 4 Project Structure
    • June 18, 2017
  • AWS 5
    Email alerts when a docker container stopped in AWS ECS CLUSTER
    • July 24, 2020
Code4Developers
Learning is never ending process

Input your search keywords and press Enter.

 

Loading Comments...
 

    %d