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:
- Click on the Google Cloud Platform Console.
- Click the project drop-down and select or create the project for which you want to add an API key.
- Click the menu button and select APIs & Services > Credentials.
- On the Credentials page, click Create credentials > API key.
The API key created dialog displays your newly created API key. - Enabling the Google Maps JavaScript API and Places API for the project.
- 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.