Vue Js Google Maps Tutorial; In this Vue example, we will learn how to draw multiple markers on a Google map in a Vue Js application using the vue2-google-maps package.
Some of us already know the fact that the vue2-google-maps is such a plugin that helps us in adding google maps to the Vue Js app.
In addition, it also makes us create Google Maps in a Vue app. This famous package comes with a number of handy features which lets us customize Google Maps in the Vue environment in quite a smooth and easy manner.
How To Add Multiple Markers To Google Map In Vue Using The vue2-google-maps-Package
Step 1- Install Vue CLI
Step 2- Download the New Vue project
Step 3- Add Vue 2 Google Maps Package
Step 4- Get Google Maps API Key
Step 5- Register Google Maps Package
Step 6- Create Reusable Map Component
Step 7- Update Map Component In App.vue
Step 8- Start Vue Application
Let’s learn in detail now:
Step 1- Install Vue CLI
The very basic step for starting with the implementation is just to install Vue CLI using the below command:
npm install -g @vue/cli
Step 2- Download The New Vue Project
The next step is just to install the new Vue app:
vue create vue-demo-app
Now, we get into the project folder:
cd vue-demo-app
Error: digital envelope routines::unsupported
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
To remove the above error for invoking the app, do remember to update the “scripts”: [] array in the package.json file.
"scripts": {
"serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
"lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
},
Step 3- Add Vue 2 Google Maps Package
Further, we have to install the vue2-google-maps from the node manager library. We will use the given command for this purpose:
npm install vue2-google-maps
Step 4- Get Google Maps API Key
We need to get the Google Maps API key in order to add the Google Maps in Vue. See the below instructions that are to be followed for doing so:
- Go to Google Cloud Platform.
- Then, we create a new project. Look at the top left section and click the project dropdown.
- Do remember to click on the APIs & Services > Credentials at the left vertical menu.
- Afterward, we have to click on Create Credentials, then on the API key.
- Thereafter, we need to copy the API key from the model dialog that has just appeared on our screen.
- Then, we will click on Credentials, after which we click on “Enable APIs and Services” and enable “Maps JavaScript API” and “Places API” services.
Step 5- Register Google Maps Package In Vue
Here, in this step, we need to import the “vue2-google-maps” module and inject it into the use() method. This lets us access the map package’s methods and properties in the Vue template.
Then, we have to add the given code in the src/main.js file:
import Vue from 'vue'
import App from './App.vue'
import * as VueGoogleMaps from "vue2-google-maps" // Import package
Vue.config.productionTip = false
Vue.use(VueGoogleMaps, {
load: {
key: "GOOGLE MAP API KEY GOES HERE",
libraries: "places"
}
});
new Vue({
render: h => h(App),
}).$mount('#app')
Step 6- Create Reusable Map Component
We know that the components are reusable instances. Each component has a unique name which can be invoked by adding it to the main App.vue file.
Further, we have to create DrawGoogleMap.vue file and update the below code in src/components/DrawGoogleMap.vue file:
<template>
<div>
<h2>Vue Js Google Maps with Multiple Markers Example</h2>
<gmap-map
:center="center"
:zoom="10"
style="width:100%; height: 555px;">
<gmap-marker
:key="index"
v-for="(gmp, index) in locations"
:position="gmp"
@click="center=gmp"
></gmap-marker>
</gmap-map>
</div>
</template>
<script>
export default {
name: "DrawGoogleMap",
data() {
return {
center: {
lat: 39.7837304,
lng: -100.4458825
},
locations: [],
currentLocation: null
};
},
mounted() {
this.setLocationLatLng();
},
methods: {
setPlace(loc) {
this.currentLocation = loc;
},
setLocationLatLng: function() {
navigator.geolocation.getCurrentPosition(geolocation => {
this.center = {
lat: geolocation.coords.latitude,
lng: geolocation.coords.longitude
};
});
this.locations = [
{
lat: 39.7837304,
lng: -100.4458825,
label: 'United States'
},
{
lat: 38.6529545,
lng: -90.2411166,
label: 'St. Louis'
},
{
lat: 41.3828939,
lng: 2.1774322,
label: 'Barcelona'
},
{
lat: -10.3333333,
lng: -53.2,
label: 'Brazil'
}
];
}
}
};
</script>
Step 7- Update Map Component In App.vue
Here, in this step, we will learn how to register the component in the main src/App.vue file. We need to import the component, pass the name of the component in the components object and define the component name in the template directive:
<template>
<div id="app">
<DrawGoogleMap />
</div>
</template>
<script>
import DrawGoogleMap from "./components/DrawGoogleMap";
export default {
name: 'App',
components: {
DrawGoogleMap
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #000000;
margin-top: 50px;
}
</style>
Step 8- Start VueApplication
So, we have reached the final step of this Vue guide where we have to head over to the command-line tool and type the given command. This will run the Vue app in the browser:
npm run serve
Conclusion
In this Vue tutorial, we have learned to add multiple location markers on Google Maps with the help of the vue2-google-maps package and Google Maps API.
Hope that you found this Vue guide quite expressive and easy to follow.
Thanks