How to Implement and Show Google Map in Vue 2

If you want to know the best way to integrate Google map into Vue js, this guide is the one you have been searching all over the internet.

Today, this vue js google map integration example will show you how to implement Google Maps in vue and add the simple functionality to search and add marker pin in google maps.

The Google map integration will be done using the vue2-google-maps package, which will be the ultimate elixir for adding maps in vue.

Here is the overview of this tutorial; we start with creating a simple vue app, add a map plugin and formulate the consent between google cloud and vue js.

Then move on to the subsequent step and create a google map component finally register the component. Furthermore, you will also learn how to quickly get the Google Map API key to display places on the map.

Vue Js Google Map Integration Tutorial

Here are the instructions that help you integrate google maps in Vue js application.

• Step 1: Install Vue Project
• Step 2: Install Vue2 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

Install Vue Project

Vue CLI is the standard go-to tool and must for vue development, execute command to get started.

npm install -g @vue/cli

In the subsequent step, run command to install the brand new Vue application.

vue create vue-demo-app

Move to project root.

cd vue-demo-app

Node.js Gatsby error – “digital envelope routines::unsupported …”

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 above error for invoking the app, make sure to update the "scripts": [] array in 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"
},

Install Vue2 Google Maps Library

Next, run the provided command to add the Vue2 Google Maps package into the Vue app.

npm install vue2-google-maps

Get Google Maps API Key

To add Google Maps in Vue, you have to get the Google Maps API key; in the below section, we have comprised some instructions needed to get the google maps API key.

• Go to Google Cloud Platform.
• Next, you have to create the new project, look at the top left section and click on the project dropdown.
• Make sure to click on the APIs & Services > Credentials at the left vertical menu.
• Thereafter, click on Create Credentials then on the API key.
• Copy the API key from the model dialog that has just appeared on your screen.
• Click on Credentials, then click on “Enable APIs and Services”, and enable “Maps JavaScript API” and “Places API” services.

Register Vue Google Maps Module

We need to import the “vue2-google-maps” module and inject into the use() method. This allows you access the map package’s methods and properties in the Vue template.

Add code in 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')

Create Vue Component

The journey of thousand miles begins with a single step; this idiom is true in the sense of Vue components. In your development journey, each component is a small step towards full-fledged functionalities.

Components are reusable instances; each component has a unique name, which can be invoked by adding into the main App. vue file.

Update following 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>

Here is what we have done in the above amply clean code, atleast we think so.

The gmap-autocomplete directive shows the location search autocomplete, which lets you search the location and add the marker. Whereas, gmap-map directive display the map blatantly.

Show Google Map

To register the component in vue, import the component, define the component in the export object at the same time in the template tag.

Add the code in 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>

Start Vue Application

We have configured bits and pieces and precisely went through the essential nitty-gritty; now, you should execute the given command and run the Vue development server.

npm run serve

Here is the url that lets you view the app.

http://localhost:8080

Conclusion

Through this Vue Google Map integration tutorial, you must have understood how to add Google map in vue and how to create Google map component within the Vue infrastructure.

As you can easily see the unbound supremacy of the vue2-google-map plugin, it offers you amply clean map integration in vue.