Vue JS Google Map Integration Example

Vue js google Maps integration example; In this tutorial, you will learn how to integrate and use google map in vue js applications using the vue2-google-maps package.

This tutorial will guide you step by step on how to integrate or use google maps api for beginners and experts in Vue js app. As well as, will make a simple example of how to integrate google maps in vue js with vue2-google-maps.

Note that, 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. While the sheer breadth of their offering seems a bit overwhelming, it’s actually quite simple to get started.

First of all, You need get API key before you can make calls to the Google Maps Geocoding service.

So visit this link: https://cloud.google.com/maps-platform/?_ga=2.27293823.277869946.1577356888-568469380.1576660626#get-started and get the API key.

Steps of to get an API key From Google Console:

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.

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 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 New VUE JS App

In this step, open your terminal and execute the following command to create new vue js app:

vue create google-map-vue

Step 2 – Install Google Map Package

In this step, open your terminal and execute the following command to install google map package in your vue js app:

cd google-map-vue

npm install vue2-google-maps --save

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

In this step, visit /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

In this step, visit /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 – Add Component on App.vue

In this step, visit /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

To use google map in vue js example, 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