Vue JS Add Multiple Markers on Google Maps Example

Vue js add and show multiple markers on google map example. In this tutorial, you will learn how to add multiple markers on google map in vue js app.

This tutorial will guide you step by step on how to add multiple markers on google maps in Vue js app. As well as, will make simple example of how to add multiple markers on 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 Add Multiple Marker on Google Maps in vue2-google-maps

Just follow the following steps and add multiple marker on google maps in vue js app using vue2-google-maps package:

• 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.vue'
import * as VueGoogleMaps from "vue2-google-maps"

Vue.config.productionTip = false

Vue.use(VueGoogleMaps, {
  load: {
    key: "Add Your Google Map Key",
    libraries: "places" // necessary for places input
  }
});

new Vue({
  render: h => h(App),
}).$mount('#app')

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>
    <br>
    <h1>Vue Js Add Multiple Markers on Google Maps Example - Tutsmake.com</h1>

    <gmap-map
      :center="center"
      :zoom="12"
      style="width:100%;  height: 400px;"
    >
      <gmap-marker
        :key="index"
        v-for="(m, index) in markers"
        :position="m"
        @click="center=m"
      ></gmap-marker>
    </gmap-map>

  </div>
</template>

<script>
export default {
  name: "GoogleMap",
  data() {
    return {
      center: { lat: 45.508, lng: -73.587 },
      markers: [],
      currentPlace: null
    };
  },

  mounted() {
    this.geolocate();
  },

  methods: {
    setPlace(place) {
      this.currentPlace = place;
    },
    geolocate: function() {

        navigator.geolocation.getCurrentPosition(position => {
          this.center = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
          };
        });

        this.markers = [
          {
              lat: 21.1594627,
              lng: 72.6822083,
              label: 'Surat'
          },
          {
              lat: 23.0204978,
              lng: 72.4396548,
              label: 'Ahmedabad'
          },
          {
              lat: 22.2736308,
              lng: 70.7512555,
              label: 'Rajkot'
          }
      ];

    }
  }
};
</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>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Conclusion

In this tutorial, you have learned how to add multiple markers on google maps in Vue js app using vue2-google-maps.

Recommended VUE JS Tutorials