How to Create and Show Google Map in Vue Js App

Vue js google map integration; Through this tutorial, i am going to show you how implement and show google maps in vue js applications.

How to Implement and Show Google Map in Vue Js App

Just follow the following steps and integrate google map in vue Js app using google maps apis:

• Step 1 – Create Google Map Api Key
• Step 1 – Create New VUE JS App
• Step 2 – Install Google Map Package
• Step 3 – Add to Vue with vue2-google-maps
• Step 4 – Create Map Search Component
• Step 5 – Add Component on App.vue

Step 1 – Create Google Map Api Key

Use the following steps and create google map api keys:

1. Visit the Google Cloud Platform Console.
2. Click the project drop-down and select or create the project for which you want to add an API key.
3. Click the menu button  and select APIs & Services > Credentials.
4. On the Credentials page, click Create credentials > API key.
   The API key created dialog displays your newly created API key.
5. Enabling the Google Maps JavaScript API and Places API for the project.
6. Click Close.

Step 2 – Create New VUE JS App

Run the following command on command prompt to create new vue js app:

vue create google-map-vue

Step 2 – Install Google Map Package

Run the following command on command prompt to install google map package in your vue js app:

cd google-map-vue

npm install vue2-google-maps --save

Step 3 – Import to Vue with vue2-google-maps

Go to /src directory and open main.js file. Then Import vue2-google-maps in main.js and instantiate the plugin using your Google map API key from above:

import Vue from "vue";
import App from "./App";
import * as VueGoogleMaps from "vue2-google-maps";
Vue.use(VueGoogleMaps, {
  load: {
    key: "REPLACE-THIS-WITH-YOUR-KEY-FROM-ABOVE",
    libraries: "places" // necessary for places input
  }
});
new Vue({
  el: "#app",
  components: { App },
  template: ""
});

Be sure to replace 'YOUR_GOOGLE_MAPS_API_KEY_GOES_HERE' with your actual Google API key. Also, specify the places library which will be required for using the autocomplete feature.

Step 4 – Create Map Search Component

Go to /src/components directory and create a new component called GoogleMap.vue and add the following code into it:

<template>
  <div>
    <div>
      <h2>Search and add a pin</h2>
      <label>
        <gmap-autocomplete
          @place_changed="setPlace">
        </gmap-autocomplete>
        <button @click="addMarker">Add</button>
      </label>
      <br/>
    </div>
    <br>
    <gmap-map
      :center="center"
      :zoom="12"
      style="width:100%;  height: 400px;"
    >
      <gmap-marker
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        @click="center=m.position"
      ></gmap-marker>
    </gmap-map>
  </div>
</template>
<script>
export default {
  name: "GoogleMap",
  data() {
    return {
      // default to Montreal to keep it simple
      // change this to whatever makes sense
      center: { lat: 45.508, lng: -73.587 },
      markers: [],
      places: [],
      currentPlace: null
    };
  },
  mounted() {
    this.geolocate();
  },
  methods: {
    // receives a place object via the autocomplete component
    setPlace(place) {
      this.currentPlace = place;
    },
    addMarker() {
      if (this.currentPlace) {
        const marker = {
          lat: this.currentPlace.geometry.location.lat(),
          lng: this.currentPlace.geometry.location.lng()
        };
        this.markers.push({ position: marker });
        this.places.push(this.currentPlace);
        this.center = marker;
        this.currentPlace = null;
      }
    },
    geolocate: function() {
      navigator.geolocation.getCurrentPosition(position => {
        this.center = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
      });
    }
  }
};
</script>

Step 5 – Import Component on App.vue

Go to /src/ directory and App.vue file. And then add the following code into it:

<template>
  <div id="app">
    <google-map />
  </div>
</template>
<script>
import GoogleMap from "./components/GoogleMap";
export default {
  name: "App",
  components: {
    GoogleMap
  }
};
</script>

Conclusion

Through this tutorial, you have learned how to integrate google map in vue js app using google map apis and vue-google-maps package.

Recommended VUE JS Tutorials