You block advertising 😢Would you like to buy me a ☕️ instead? In today’s article, we take a look at how we can use the Google Maps API in combination with Vue.js. We build a simple Vue.js component, which renders a Google Map.
Furthermore, we learn how to listen for click events on markers and how we can cluster multiple markers in close distance to each other.
You can take a look at the complete source code on GitHub, or you can check out the demo application hosted on Netlify.
- Before we get started with building our custom implementation, let me point out that there already is a pretty good Vue.js plugin named vue2-google-maps which makes it possible to assemble a map and its markers in a declarative manner.
- Although I find the declarative approach pretty interesting and very Vue-ish, in this article, we do not use this plugin but instead, use the bare Google Maps API.
- There are two reasons for this decision: first of all, using the plugin adds some overhead in terms of bundle size and second it also adds some overhead in terms of finding out how to do more complicated stuff with the API.
If we use the raw API instead, we can read the documentation or some StackOverflow threads to learn how to do certain things.
Wrapping it up
On the other hand, if we use the plugin, we might have trouble finding out how to do more advanced stuff, which might not be covered by the documentation of the vue2-google-maps plugin.
The vue2-google-maps plugin
Do you want to learn more about advanced Vue.js techniques?
Vue-2 port of vue-google-maps
In the following code snippet, you can see the init() function, which we later use to load the Google Maps script initially.
This allows loading the Google Maps script on-demand, which means that we can delay loading the script until we want to render a Google Map. Google Maps makes it possible to specify the name of a callback function in the URL which we use to load the script.
When this callback function is called we resolve the initialization promise which signals to us that Google Maps is ready.
Basic usage / Documentation
Step 1 — Setting Up the Project
We now can use the init() function inside of our Vue.js component which should render the map.
After initializing Google Maps we can create a new map with google.maps.Map().
Register for the Newsletter of my upcoming book: Advanced Vue.js Application Architecture.
So far so good but currently our map is a little empty. Let’s change this by adding some markers. In the two code snippets above you can see that we’ve added an array of locations.
Inside of the mounted() hook of our component we iterate over all of the locations and create a new marker for each of it.
When previously our map was too empty, now it is definitely too crowded – at least in the area of Vienna.
But we can use the @google/markerclusterer library to merge markers which are very close to each other.
After installing the @google/markerclusterer package, we can import it into our component and use it to cluster certain markers close to each other.
You can see the result in the following screenshot.
Currently not too much is going on with our map. Let’s add at least some interactivity by binding a click handler on our markers.
Now, if a user clicks on a marker, we simply zoom closer. Admittedly not too exiting stuff, but you get the point.
Table of Contents
Follow me to get my latest Vue.js articles.
- Integrating the Google Maps API into a Vue.js application is pretty straightforward.
- One concern though using it, is the dependence on Google.
- Sadly currently, for most projects where some kind of map is needed, there is no way around Google Maps so far (although OpenStreetMaps can be a valid alternative in certain cases).
- On the other hand, Google Maps is a really powerful tool and it’s still free if you don’t have a lot of traffic.
- Google Maps presents a robust set of APIs for building and interacting with maps, visualizing location data, and searching via autocomplete, to name but a few.
- vue-google-maps, which has been updated for Vue.js 2, provides Vue.js applications with tools to utilize these APIs.
It comes with a well-rounded set of components for interacting with Google Maps as well as two-way data binding.
In this tutorial, you will use the vue2-google-maps library and create a map that uses autocomplete to display a location.
To complete this tutorial, you will need:. Node.js installed locally, which you can do by following How to Install Node.js and Create a Local Development Environment.
This will require a Google account.
Signing in to the Google Cloud Platform Console.
And creating credentials for an API Key. Warning: To avoid the “For development purposes only” messages when using the Google Maps API, you will need to provide a valid credit card and associate with a Billing account for the Google Cloud Project.
Please be aware of the fees that are associated with using these APIs.