Vue 2 Tutorial- How To Draw Multiple Markers On Google Maps

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:

1. Go to Google Cloud Platform.
2. Then, we create a new project. Look at the top left section and click the project dropdown.
3. Do remember to click on the APIs & Services > Credentials at the left vertical menu.
4. Afterward, we have to click on Create Credentials, then on the API key.
5. Thereafter, we need to copy the API key from the model dialog that has just appeared on our screen.
6. 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