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

What are we building?

This five part series builds up an example of finding places within city boundaries.

We’re going to write a Vue.js app that uses a few Google Maps APIs, grab some GeoJSON data to determine our city limits, and make it all work together.

It will be fun, so let’s get started!

This is part 1 of 5.

• Part 1: Set up Vue.js + Google Maps (move marker when clicked)
• Part 2: Location searching with autocomplete, or update location via mouse click
• Part 3: Get GeoJSON data from nominatim, and draw city boundaries on map
• Part 4: Search via Google Places API, with a fixed radius
• Part 5: Filter search results to occur within boundaries

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

Getting a basic Vue.js + Vuetify + Google Maps app set up

In this section:

• generate a Vue.js + Vuetify app
• grab a Google Maps API key
• display a basic map
• display a marker that shows position of last click

Create an app

(for background information, see the Vuetify quick start page)

Run the following commands from a directory where you like to base your projects:

vue create citymap
cd citymap
vue add vuetify
npm install --save scriptjs
npm run serve

This will get you a basic Vue.js app, running at http://localhost:8080

Initial app from installing Vue.js and Vuetify

Get a Map component going

We’ll get rid of src/components/HelloWorld, and start a Map component. In App.Vue, the change looks like:

Initial change of App.vue, to reference a new Map component

Map.vue intially starts as:

Map component placeholder

As a sanity check, we preview the result:

Yep, component hooked up…

Now we can turn our attention towards putting a map there.

You will need to get a Google API key. This will be used for every request to location services, place searches, and the map itself. Once you have a key, you need to tell Google which APIs you will use it with. In the Google Cloud Console, enable the APIs for Geolocation, Maps, and Places:

We load the Google Maps API via the mounted() call in our Map component. Using the scriptjs node module makes it easy to do this asynchronously. Our Map component is looking like:

simple map, centered in NYC

Be sure to substitute your own API key. (as a reminder, the repo for this is at https://github.com/DanielSmith/citymap )

Test The Map

The basic map looks like:

Add A Marker

The last little step of Part 1 is to have a marker that displays the location of most recent click. In Part 2, we will add a location search, which will also be able to update the marker.

To support a marker, and to keep track of the last click, we add a few methods to our Map component:

We’re now at the point where we have a simple map and a marker. We’ll expand on this in Part 2.

end of part 1, updating our marker