Vue Js Google Map Integration Example; This Vue @ guide will make us learn how to integrate Google Maps into Vue 2 apps. We will also learn to add the simple functionality to search and add marker pins in Google Maps.
We will see the Google Map integration using the vue2-google-maps package.
We will be starting with just installing a simple new Vue app, adding a map plugin and then formulating the consent between Google Cloud and Vue Js.
Afterward, we will create a Google Map Component and register the component. We shall also be learning how to get the Google Map API key to display places on the map.
Vue Js Google Map Integration Tutorial
Let’s learn this implementation step by step:
Step 1- Install Vue Project
Step 2- Install Vue 2 Google Maps Library
Step 3- Get Google Maps API Key
Step 4- Register Vue Google Maps Module
Step 5- Create Vue Component
Step 6- Show Google Map
Step 7- Start Application
Step 1- Install Vue Project
First of all, we have to install a standard CLI tool for Vue Js development. We can easily do so since it’s available through the node package manager. We will have to do so using the below command:
npm install -g @vue/cli
Further, we have to run the command in order to install a new Vue app:
vue create vue-demo-app
Then, we move to the project root:
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 2- Install Vue 2 Google Maps Library
Further, we have to run the provided command to add the Vue2 Google Maps package into the Vue app:
npm install vue2-google-maps
Step 3- 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 4- Register Vue Google Maps Module
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 5- Create Vue 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 update the below code in src/components/AddGoogleMap.vue file:
<template>
<div>
<div>
<h2>Vue Js Search and Add Marker</h2>
<label>
<gmap-autocomplete @place_changed="initMarker"></gmap-autocomplete>
<button @click="addLocationMarker">Add</button>
</label>
<br/>
</div>
<br>
<gmap-map
:zoom="14"
:center="center"
style="width:100%; height: 600px;"
>
<gmap-marker
:key="index"
v-for="(m, index) in locationMarkers"
:position="m.position"
@click="center=m.position"
></gmap-marker>
</gmap-map>
</div>
</template>
<script>
export default {
name: "AddGoogleMap",
data() {
return {
center: {
lat: 39.7837304,
lng: -100.4458825
},
locationMarkers: [],
locPlaces: [],
existingPlace: null
};
},
mounted() {
this.locateGeoLocation();
},
methods: {
initMarker(loc) {
this.existingPlace = loc;
},
addLocationMarker() {
if (this.existingPlace) {
const marker = {
lat: this.existingPlace.geometry.location.lat(),
lng: this.existingPlace.geometry.location.lng()
};
this.locationMarkers.push({ position: marker });
this.locPlaces.push(this.existingPlace);
this.center = marker;
this.existingPlace = null;
}
},
locateGeoLocation: function() {
navigator.geolocation.getCurrentPosition(res => {
this.center = {
lat: res.coords.latitude,
lng: res.coords.longitude
};
});
}
}
};
</script>
Step 6- Show Google Map
For registering the component in Vue, we will import the component for which we have to define the component in the export object at the same time in the template tag.
We need to add the given code in the src/App.vue file:
<template>
<div id="app">
<AddGoogleMap />
</div>
</template>
<script>
import AddGoogleMap from "./components/AddGoogleMap";
export default {
name: 'App',
components: {
AddGoogleMap
}
}
</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 6- Start Application
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 integrate Google Maps into Vue 2 apps. We have also seen how to create a Google Map component within the Vue infrastructure.
Thanks