Getting the Best Places in Town With the Google Maps API

Search Google Maps and sort by rating

Ferenc Almasi
Jan 9 · 7 min read
Choosing a place on Google Maps
Choosing a place on Google Maps
Photo by henry perks on Unsplash
originally published on webtips.dev
originally published on webtips.dev

If you’re anything like me, you’ve probably asked yourself this question at some point in your life, the one nobody has the answer for: Where/what should we eat? Since I’m a developer, I decided I’d had enough and would let computers give me some suggestions. That’s when the idea came to ask Google Maps to list out the top restaurants/bars/anything else nearby so we’d have an easier time choosing.

Luckily, the Google Maps API has the ability to do just that with the combination of its Places API. So today, I would like to show you how you can do the same.

The very first step in this endeavor is to receive an API key.

Retrieving the API Key

The API key will be used to make calls for the different APIs. To get an API key, head over to your Google Cloud Platform dashboard. Select a project or create a new one if you haven’t started one already.

Choose a project or create a new one under your Google Cloud Platform interface
Choose a project or create a new one under your Google Cloud Platform interface
Mine here is called “Google Maps API”

Head over to the menu button and choose the Credentials tab under API & Services.

Choose the Credentials option under API & Services
Choose the Credentials option under API & Services

Click on the Create Credentials button and your newly created API key will pop up.

The create credential button inside the Google Cloud Platform
The create credential button inside the Google Cloud Platform

It’s a good idea to restrict your API key before you use it in a production environment to avoid unexpected expenses and prevent quota theft. You can set up restrictions in the APIs & Services menu under the Credentials tab.

Restrict API Key under the Credentials tab
Restrict API Key under the Credentials tab

Note that in order to use Google Cloud services, you might have to link your project to a billing account. Fortunately for us, the Google Maps API is still free to use up to a $200 monthly usage. That equals to about 28,000 calls per month. To learn more about pricing, visit the Pricing & Plans or the Pricing Table section on Google Cloud.

If you’d prefer reading Google’s step by step tutorial on how to get an API key, you can refer to their own documentation.

Setting Up the Places API

In order to get information about places on the map, we’re going to use the Places API. To be able to use it, you’ll need to enable it in your Cloud Platform Console.

Go to the project you’ve just created, click on the navigation menu, and choose the Library option under API & Services. You’ll be greeted with the following page:

The Google Cloud Platform API Library
The Google Cloud Platform API Library

Search for “Places API” and select enable. Just like for the Google Maps API, the Places API’s nearby search function — which we will use — is free up to 5,000 calls per month.

Now that you’re all set and done from the administrative side, we can jump into coding.

Setting Up the Project

Create a new folder and add the following index.html file:

We won’t have an actual Google Maps map as we’re going to display the results in an ordered list. You also want to include the API library, and don’t forget to replace YOUR_API_KEY with your actual API key. We’ll also make use of the Places API — you need to specify this as a query string. This is what &libraries=places is suppose to do.

I also created a places.js where our own implementation will go. You can add that to the project folder as well. And this is all we need. Everything else will go inside the places.js file.

Getting Some Results

Before we can start fetching results, we need to create some variables:

We’re going to store everything inside a results array, and we also get a reference to the places element. But the interesting part here is the request and the service we have created. The service will take care of requesting the places. You can pass in any DOM element to PlacesService; it doesn’t have to be a Google Maps object. If you still want to display the results on a map, you need to change the places variable to the following:

Once we have the service, we can call the nearbySearch method with a request object along with a callback function. The three main things we need to specify inside the request are:

  • A location: The coordinates are created from latitude and longitude values. It takes in a google.maps.LatLng object.
  • A radius: Representing the circle’s radius in meters, its middle being the lat-lng position. The maximum value here can be 50,000.
  • A type array: The type of place we’re looking for. Since we’re hungry, we want restaurants to be returned. For a full list of supported types, you can refer to the documentation on the Google Maps Platform.

The coordinates are pointing to London. To get the coordinates for a city, simply go to maps.google.com and search for the city. The lat lang coordinates will appear in the address bar:

Getting the coordinates from the address bar
Getting the coordinates from the address bar

We also have a callback function that we haven’t defined yet, so let’s do that right now!

The three things that the callback expects are a response object where everything the service returns will be stored, astatus representing the success or failure of the call, and an optional pagination object.

By default, each query to the service returns 20 results. However, it’s possible to extend it to 60 split across three pages. This is why we have to use pagination. The pagination.nextPage function will call this callback function again.

You may have also noticed that the call to the pagination function is wrapped inside a setTimeout. This is because you must wait at least two seconds before the next page of results is available. This also means that since it takes time to fetch all the results, ideally you would display some kind of loading indicator to show the user that something is going on in the background.

Now if the service returned everything, pagination.hasNextPage will cease to exist making us jump to the else block, where we finally display the results. I outsourced the code here into a different function just so we have some sort of separation.

Display Everything

The displayResults function will be really simple. Let’s see what we have:

First, we need to filter the list of results. There might be cases where the rating is missing. In that case, we won’t know if the place is trustworthy. By simply saying…

result => result.rating

…we tell JavaScript to include results only that contains a rating. If result.rating is undefined, it will be omitted from the result set.

Next, we need to sort it based on the rating so we get the best options to choose from at the very top. Lastly, we can display their name and their rating in a forEach loop.

It’s important to mention that from a performance perspective this isn’t the best way to manipulate the DOM in each loop of the forEach. One alternative would be to create the string inside the loop and add it to the DOM only once the loop has finished.

Now if you head back to the browser and refresh the page, you should see 60 results (in case every result had a rating) ordered by rating, with the highest rated being on top.

Getting places in action
Getting places in action
Looks like Red Rose it is

Summary

Having this tool in your pocket guarantees that you’ll never have to starve again. All that’s left to do is to create a fancy user interface so you can select the city dynamically with a chosen radius and a chosen place type.

As always, you can reach the whole project on my GitHub at the places repo. Feel free to tweak it and let me know your suggestions in the comments️. Now it’s time to go and eat something.

Learn more about JavaScript and web development
Learn more about JavaScript and web development

Better Programming

Advice for programmers.

Ferenc Almasi

Written by

💻 Frontend dev with a passion for beautiful code • 🐦 posting webtips on twitter • 🛠️ Building diettime.app Get in touch @ hello@allma.si or visit allma.si 👋

Better Programming

Advice for programmers.

Ferenc Almasi

Written by

💻 Frontend dev with a passion for beautiful code • 🐦 posting webtips on twitter • 🛠️ Building diettime.app Get in touch @ hello@allma.si or visit allma.si 👋

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store