How To Map Cities With Vue, GeoJSON, And Google: Part 4

Daniel Smith
Apr 19 · 3 min read

Searching With Google Places

This is part 4 of 5.

The repository for this project is at https://github.com/DanielSmith/citymap

In this section, we’re going to submit keyword searches to Google Places, and we will get back information about businesses and other points of interest. The Google Places API is a little tricky to work with (other APIs such as Yelp, or Foursquare, are more flexible to deal with in terms of pagination, and the number of results that can be obtained). I wrote about some Places API specifics at “Making API faces at Google Maps and Places”.

I am trying to limit the scope of how many things you would need to sign up for, in order to recreate my example. For that reason, I will stick to the Google Places Search API.

We’re going to keep it simple: keyword search with a fixed radius of 500 meters.

quick peek at places search with keyword

In this section:

  • update UI
  • update Eventbus in Map.vue
  • call Google Places API nearbySearch()
  • show markers for results

This section is a bit of a breather before Part 5, where we get into filtering results against polygons… As always, please refer to the repo at https://github.com/DanielSmith/citymap — I do not refer to every new line of code here in the article.

Updating the UI

We add a text field and button for submitting a keyword search:

Note: Google Places allows AND and OR searches. Not only can you search on “coffee”, but you could try “coffee AND yoga”, or “coffee OR yoga”. Try it and see how it affects your results.

We pick up a new model here: theKeyword. We also use Eventbus to communicate the keyword string over to our Map component:

Update Eventbus in Map.vue

The flow of communicating keywords to search in the Map component looks like this:

Note that I deliberately have a method called doKeywordSearch(), so that there is a convenient spot to launch searches for other APIs.

I note that doSearch() could be named to be more specific to Google. I would change the name if I were using multiple APIs.

Call Google Places API nearbySearch()

I really prefer how other APIs (such as Yelp) handle pagination. They provide a total of how many results are available, and then you grab chunks of data with successive calls (using offsets), until you have retrieved everything. Google is a bit different, in that you look for a parameter in your results to see if you need to call again.

There are many approaches to this. I opted to reference my outer scope, and check to see if there is a hasNextPage

I should rewrite this in more of an ES6 style.

I use a simple sleep to put a little pause between API calls (use await when calling this):

Show markers for results

As we get our results, we show Markers on the map. You can see the names of places when you hover over a Marker. It is easy to attach an info window to a Marker, in order to show photos and other data. That’s beyond the scope of this article though (I’m focused on setting the stage for filtering against GeoJSON-provided City Boundaries)

We map through our results, creating Markers, placing each one on the map:

This is separate from the Marker we move around when we click on the Map, or do an address search.

Daniel Smith

Written by

codes/writes, LAMP / MEVN / MERN, loves film, music, and bantering - I am available for projects — javajoint [at the domain of] gmail [which is a dot] com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade