Vue Google Maps Add Multiple Markers Example

Hi Guys,

Today,I will learn you how to create google map add multiple markers in vue. we will show example of google map add multiple markers in vue. i will make google maps add multiple markers in vue with vue2-google-maps. google maps add multiple markers 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.

Here follow this example of google maps add multiple markers.

Creating a Project

here, I this step create new Vue Project.follwing command

vue create google-map-vue

Installation Package

Now this step,If starting from scratch, use the vue-cli template of your choice (we like webpack-simple). Then install vue2-google-maps, note this is the updated version for Vue 2

npm install vue2-google-maps --save

Get API Key

In this step,There’s a handy button right in the Maps Javascript API docs. Simply click on ‘GET A KEY’ and follow the instructions. Also, if you plan on releasing anything into the wild, it’s best to add your billing information as this will drastically raise your 'free’ daily API limits.

Add to Vue with vue2-google-maps

In this step,Import vue2-google-maps in main.js and instantiate the plugin using your API key from above. Note that we are also telling it to load the places library, which is required for the autocomplete.

vue2-google-maps/src/main.js

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')

Map add multiple markers

Here this step, Create a new component called GoogleMap.vue and paste the following into it:

vue2-google-maps/src/components/GoogleMap.vue

<template>
  <div>
    <br>
    <h1>Vue Google Maps Add Multiple Markers Example - Nicesnippets.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>

Add to App.vue

In this last, just add your new component in App.vue and everything should look something like this:

vue2-google-maps/src/App.vue

<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>

It will help you....