Vue JS Add & Show Multiple Markers on Google Maps

Vue js show multiple markers on google map; Through this tutorial, i am going to show you how to add and show multiple markers on google map in vue js app.

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 Google Map Api Key
• Step 2 – Create New VUE JS App
• Step 3 – Install Google Map Package
• Step 4 – Add to Vue with vue2-google-maps
• Step 5 – Create Map Search Component
• Step 6 – Import Component on App.vue

Step 1 – Create Google Map Api Key

Use the following steps to create google map api key:

1. Click on 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 terminal to create new vue js app:

vue create google-map-vue

Step 3 – Install Google Map Package

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

cd google-map-vue
npm install vue2-google-maps --save

Step 4 – Add 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.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 5 – 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>
    <br>
    <h1>Vue Js Add Multiple Markers on Google Maps Example - Laratutorials.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 6 – 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>
<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