Vue 2 Create Google Maps & Add Multiple Markers Tutorial

Learn how to integrate Google maps in vue and add or draw multiple location markers on Google maps in vue js using the vue2-google-maps library from scratch.

The proliferation of Google Maps in our lives helping us in many ways; it solves many of our problems eloquently. Thanks to Google for their profound discovery.

Google maps significantly allow people to find your business, contact your business, help people visit your site, show your business with images, and invoke authenticity in people’s minds.

It also helps you find the route or location with ease; in this tutorial, we will help you add Google maps in the Vue js application and describe how you can add markers on Google maps using the vue2-google-maps plugin.

In frontend development, we essentially focus on making our things more straightforward, as the application’s functionalities proliferation extending it tends to become unmanageable.

Vue’s component-based paradigm is a gold mine for frontend developers, and we will create a Vue Google map component and implement the Google map and draw multiple markers on the map using the vue2-google-maps package.

Vue Js Draw Multiple Markers on Google Maps Example

  • Step 1: Create Vue Application
  • Step 2: Grab Maps API Key
  • Step 3: Install Google Maps Package
  • Step 4: Add Google Map API Key
  • Step 5: Create and Register Component
  • Step 6: Create Google Map and Draw Multiple Markers
  • Step 7: Start Vue App

Create Vue Application

First, install the vue cli, it’s a primary vue development tool.

npm install -g @vue/cli

Next, use the command to install the latest version of the Vue app, likewise get into the project folder.

vue create vue-cosmic-app
cd vue-cosmic-app

Vue Gatsby Error

Node.js Gatsby error – “digital envelope routines::unsupported …”

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 above error for invoking the app, make sure to update the "scripts": [] array in 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"
},

Fix Multi Word Error

In order to fix multi-word error, insert the given code in vue.config.js file.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
})

Grab Maps API Key

To make the communication between two entities (vue app and Google) requires an API key. This API key will receive the map data from Google and display it on your application, and you can proliferate the map functionality in your vue project with utmost profoundness.

Here are the easy instructions you can follow to get the google maps API key.

Step: 1 Go to Google Cloud Platform.

Step: 2 Next, click on the project dropdown and create a new project.

Step: 3 On the large side menu, click on APIs & Services and jump on to the Credentials screen.

Step: 4 Next, create Credentials, then head over to the API key.

Step: 5 When clicked on the API key, a model dialog appear with Google Maps API key.

Step: 6 Lastly, again click on Credentials, then activate few services such as “Enable APIs and Services”, “Maps JavaScript API,” and “Places API.”

Install Google Maps Package

Further, move towards the command prompt and run the suggested command to install the vue2-google-maps package; this prodigy makes you less solicitous when it comes to add google maps with location markers in vue.

npm install vue2-google-maps

Add Google Map API Key

We acquired the maps API key from the Google cloud platform; now, this API needs to be injected in the vue and register the API in vue.

First, import the VueGoogleMpas module, and using the load object, defines the google Maps API key in the src/main.js file.

import Vue from 'vue'
import App from './App.vue'

import * as VueGoogleMaps from "vue2-google-maps";

Vue.use(VueGoogleMaps, {
  load: {
    key: "GOOGLE API KEY",
    libraries: "places"
  }
});

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

Create and Register Component

In this step, we will create a simple component where map code will go, create MapMarker.vue file in components folder, then place the following code into the components/MapMarker.vue file.

<template>

</template>

<script>
    export default {
        data() {
            return {
                
            }
        }
    }
</script>

A newly created component has to be placed in the src/App.vue file, here is the code snippet that adds and calls the new component.

<template>
   <div id="app">
      <MapMarker />
   </div>
</template>
 
<script>
import MapMarker from "./components/MapMarker";
 
export default {
  name: 'App',
  components: {
    MapMarker
  }
}
</script>

Create Google Map and Draw Multiple Markers

The gmap-map directive implements the google map; you can extend the map customization with this directive. To display multiple markers on Google map needs an array of locations; every object in the collection must have latitude, longitude, and location name.

Add code in components/MapMarker.vue file.

<template>
  <div>
    <h2>Vue Js Google Maps Multiple Markers</h2>
    <gmap-map
      :zoom="11"
      :center="center"
      style="width:100%;  height: 600px;">
      <gmap-marker
        v-for="(gmap, i) in locations"
        :key="i"
        :position="gmap"
        @click="center=gmap"
      ></gmap-marker>
    </gmap-map>
 
  </div>
</template>
 
<script>
    export default {
        name: "MapMarker",
        data() {
            return {
            center: { 
                lat: 46.227638,
                lng: 2.213749
            },
            locations: [],
            currentLoc: null
            };
        },
        
        mounted() {
            this.addLocations();
        },
        
        methods: {
            setPlace(loc) {
            this.currentLoc = loc;
            },
            addLocations: function() {
                navigator.geolocation.getCurrentPosition(geo => {
                this.center = {
                    lat: geo.coords.latitude,
                    lng: geo.coords.longitude
                };
                });
        
                this.locations = [
                {
                    lat: 46.227638,
                    lng: 2.213749,
                    label: 'France'
                },
                {
                    lat: 6.931970,
                    lng: 79.857750,
                    label: 'Sri Lanka'
                },
                {
                    lat: 56.130367,
                    lng: -106.346771,
                    label: 'Canada'
                }
            ];
        
            }
        }
    };
</script>

Start Vue App

In the last segment, type the command in the command prompt to start the vue app.

npm run serve
http://localhost:8080

Add Multiple Markers on Google Maps

Conclusion

In this tutorial, we learned how to create the google map and draw multiple location markers on Google Maps, we used the google maps API key, the confluence of map API, and vue google maps library is the primary focus of this tutorial.

We also explained how to get a google maps API key, create a basic vue app, create a maps component, and conjugate everything to output the final result. Hope it will make your development voyage facile.