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
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:
Map.vue intially starts as:
As a sanity check, we preview the result:
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:
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.