How I (sort of) got around the Google Maps API results limit

Written by lenafaure | Published 2016/10/21
Tech Story Tags: javascript | google-maps | tech | api | front-end-development

TLDRvia the TL;DR App

A practical example of using closures in JavaScript

When I was looking for a job as a web developer a while ago, I searched everywhere for a list of all the web agencies in Paris. I wanted to compare every one of them and crawled the web for a detailed and exhaustive list that I never found.

So I saw no other solution than to make it myself. I started wondering where those agencies could be referenced and accessed easily on the web, without getting lost in the 5+ million results of a google search.

Googles Places is a good way of finding businesses by keywords in any given area

I realized that almost every web agency was referenced as a Place on Google Maps. And guess what ? Google Maps API, and more specifically Google Places API, allows you to do all sorts of amazing things, including searching for places with a keywords filter, and fetching the place’s name, along with its corresponding website urls, photos and user ratings.

If I could find a way to fetch as many results as possible for the Paris area using Google Places, a great part of the job would be automatically done, and save me a valuable amount of time.

Spoiler : I managed to get up to 186 results for the Paris area, which I know for a fact is not the total number of web agencies (some of them are not registered on Google Places, others simply don’t appear in the results for unknown reasons), but allowed me to find some interesting results I wouldn’t have found otherwise. This is what it looks like :

The map:

Web agencies in Paris

The list (abridged):

Data fetched from Google Places

Google Places API seemed to have everything I needed for my purposes : once a search has been made and results are returned, the Place Details request allows you to fetch the name, website url, photos and rating of each Place. I would have liked to be able to evaluate the size of each agency by number of employees, but hey.

Initiating the search

I set up a project on localhost (I would need to use PHP later to write the results in a file), and followed the JavaScript API documentation to initiate the map (get it here) and make a Radar Search request (get it here) :

A Text Search or a Nearby Search request would let you access directly the response parameters you need, but with one major restriction : they will return a maximum of 20 results per query. Each search can return as many as 60 results, split across three pages, which means that you can call a next_page_token data and get a grand total of 60 results, but then you are stuck.

Getting around the 60 results query limit

The Radar Search request lets you search for up to 200 places at a time, but with less detail than is typically returned from a Text Search or Nearby Search request. You basically get and ID for each place, but not much more details about it, not even a name.

This means that you will have to iterate through your results to call the Place Details request by passing the ID of each of the Places you found. The Place Details request is where all the parameters we look for are returned.

This will take place in the callback of our service.radarSearch function:

This works… partially. I only get 10 detailed results by looping through the results although the total number is 186. Why is that ?

Getting around the 10 queries per second limit : setTimeout and closures

Well, the problem with the Place Details request is that it lets you query only 10 results per second. The execution of the code takes way less than one second, so it seems that we hit a wall here, doesn’t it ?

What if we used the setTimeout function to query one result per second, therefore never reaching the limit of 10 results per second ?

The setTimeout function used inside a for loop is a well-documented case of unexpected behaviour in JavaScript .

This is where the closure will be of great help, allowing us to store every value found throughout our 186 results and storing each of them in the agencies array for later use:

In the end, the full JavaScript code snippet is :

I can now use it to fetch the results I want and use the data, and the result is pretty fun to watch :

Fetching one result / second

Of course this would not work for a real-time application, but for the purpose of fetching some data about specific places I wanted to find, this worked like a charm :)

Want to learn more about the basics of JavaScript? Check out my other articles:

I hope you enjoyed this article, feel free to comment and like this article so that others can find it easily on Medium !


Published by HackerNoon on 2016/10/21