How to Implement Google Places API in Your Application (JS, Express, Node.js)

In the good old days when I knew absolutely nothing about coding but was working with a PropTech startup that automates the entire rental process for institutional landlords, one of the hottest demands from my clients and investors was for their tenants to be able to view the properties on a dynamic google map and search for cool restaurants, cafes, or bars in the adjacent neighborhood. However, my dev team back then was prioritizing building an accounting suite so our clients can have an easier time dealing with the IRS. So we postponed the plan to integrate with Google Maps, which turned out to be a mistake that cost me a few clients. No big deal — but still, I secretly wondered why we couldn’t just click the “INTEGRATE NOW” button and magic should happen in a blink.

Little did I know.

Now that I almost survived the bootcamp, I feel obligated to explain to the world how to integrate Google Maps API (specifically Places API in this article), for redemption, maybe.

How To Get Started?

1. Pick the right service(s)

Go to Google Maps Platform and decide which products your app wants to integrate with.

Map API: If you need to display static or interactive maps in your app, Map API would do the trick. You can also customize them with markers, lines, colors, and images to align with your needs.

Routes API: With Google Routes, your users can plan trips with up-to-date data on distances between points, suggested routes, and estimated travel times.

Places API: Places API provides names, addresses, and other details like ratings, reviews, or contact information for over 150 million places. It is also able to convert addresses to geographic coordinates, or vice versa.

2.Get an API key from Google Platform Console

You will need an API key for whichever service you decide on. Click Create Credentials to generate a new API key for your project but remember to restrict it so you are more in control of the usage. For dev purpose only, the $300 free credit that Google gives new users to explore the platform is usually enough and you won’t be charged until you choose to upgrade. For making API calls to retrieve places, it’s about $3 per 1000 requests. With $300 free credit, you can make over 100k requests.

3. How to protect your API key?

You can keep your API key in a file called “secrets.js”, which should be included in your .gitignore file. This can protect your API key from being accidentally uploaded to Github. In your secrets.js file, use the Node.js global variable process.env to store your API Key as follows. This way, they can still be read by Node process on process.env when your app is in prod.

process.env.GOOGLE_API_KEY='PUT_YOUR_API_KEY_HERE'

4. How to make API calls to retrieve places?

Once you have your API Key set up, in the file for your Google API routes, you can make an axios GET request to retrieve all the restaurants corresponding to your searching parameters.

A Find Place request takes a text input and returns a place. The input can be any kind of Places text data, such as a name, address, or phone number. The request must be a string. For example, if you want to look for burgers in Chelsea, Manhattan, New York City, you can structure your routes as below.

const axios = require('axios')
const router = require('express').Router()
module.exports = router
const key = process.env.GOOGLE_API_KEY
router.get('/restaurants', async (req, res, next) => {
 try {
   const neighborhood = 'chelsea'
   const borough = 'manhattan'
   const city = 'new+york+city'
   const category = 'burgers'
   const {data} = await axios.get(
   
`https://maps.googleapis.com/maps/api/place/textsearch/json?query=${category}+${neighborhood}+${borough}+${city}&type=restaurant&key=${key}`
   )
   res.json(data)
   } 
 catch (err) {
  next(err)
}
})

When you put the search string directly in your browser, https://maps.googleapis.com/maps/api/place/textsearch/json?query=burgers+chelsea+manhattan+new+york+city&type=restaurant&key=${YOUR-API-KEY-HERE} , you should be able to see all the information included in a gigantic JSON like the screenshot below.

That’s it.