Google Maps Javascript Draw Multiple Lines
Home » Vue Tutorials » Vue Js Draw Multiple Markers on Google Maps Tutorial
This comprehensive Vue Js Google Maps tutorial will answer how to take a pragmatic approach to profoundly draw multiple markers on Google map in Vue Js application using the vue2-google-maps package.
Let me start the discourse by telling you little more about vue2-google-maps library. The vue2-google-maps is very much needed plugin that makes your work facile with effect that to add the google maps in vue js app.
Not just it lets you create google map in Vue js but it surpassingly lets you populate marker in Vue Google maps.
It is a quite popular package and comes with handy features, this prodigy lets you customize Google map in Vue environment with amply clean and flawless manner.
In this guide we will show you how to set up a basic vue application, how to install google map package in vue, and create google maps reusable component using the Google Maps API to profoundly display Google maps with multiple location markers.
How to Add Multiple Markers to Google Map in Vue Js
Here are the instructions that help you implement google maps and drawing multiple markers in google maps in Vue js.
- Step 1: Install Vue CLI
- Step 2: Download New Vue Project
- Step 3: Add Vue 2 Google Maps Package
- Step 4: Get Google Maps API Key
- Step 5: Register Google Maps Package
- Step 6: Create Reusable Map Component
- Step 7: Update Map Component in App.vue
- Step 8: Start Vue Application
Install Vue CLI
If you are new to Vue js development, then set up the Vue development environment on your system.
npm install -g @vue/cli Download New Vue Project
After installing vue cli, move to the next step. Install the brand new Vue project with the help of the Vue command line interface.
vue create vue-demo-app Don't forget to get inside the project.
cd vue-demo-app Add Vue 2 Google Maps Package
This section revolves around the idea of installing the vue2-google-maps from the node package manager library; why wait? Just hit the command and let this prodigy come into your Vue project.
npm install vue2-google-maps Get Google Maps API Key
Google Maps offer a powerful set of APIs for dealing with maps; not just you can profoundly analyze location data but also search through the autocomplete.
However, when you are willing to get the map API and land on the google cloud platform, you find tons of option. This is why we have mentioned the following steps simplify the process of getting the google maps API key.
- Head over to Google Cloud Platform.
- In order to get the Google Map API, you need to create the new project, so at the top left, click on the project dropdown.
- Look for APIs & Services at the left side menu, then get into the Credentials page.
- Right after that, click on Create Credentials then on the API key.
- As soon as you click on the Api key, a model dialog manifests on the screen holding your API key.
- Click on Credentials, again click on "Enable APIs and Services", then enable "Maps JavaScript API" and "Places API" services in the API library.
Register Google Maps Package in Vue
In the following snippet, you see the confluence of codes in a proper assortment, here we have imported the VueGoogleMaps from the "vue2-google-maps" package.
On top of that, we called the VueGoogleMaps using the Vue. use() method. In the load object, defined the google map API keys similarly added the value of the place for libraries property.
Update the main src/main.js file.
import Vue from 'vue' import App from './App.vue' import * as VueGoogleMaps from "vue2-google-maps" // Import package Vue.config.productionTip = false Vue. use (VueGoogleMaps, { load: { key: "GOOGLE MAP API KEY GOES HERE" , libraries: "places" } } ) ; new Vue ( { render : h => h (App) , } ) . $mount ( '#app' ) Create Reusable Map Component
Let us make our code more organized by creating a reusable component, so let's make it Spontaneously manageable by creating a components folder in the src directory. In the same way, create DrawGoogleMap.vue file in the src/components/ folder.
Update following code in src/components/DrawGoogleMap.vue file.
<template> <div> <h2>Vue Js Google Maps with Multiple Markers Example< /h2> <gmap-map :center= "center" :zoom= "10" style= "width:100%; height: 555px;" > <gmap-marker :key= "index" v- for = "(gmp, index) in locations" :position= "gmp" @click= "center=gmp" > < /gmap-marker> < /gmap-map> < /div> < /template> <script> export default { name: "DrawGoogleMap" , data ( ) { return { center: { lat: 39.7837304 , lng: - 100.4458825 } , locations: [ ] , currentLocation: null } ; } , mounted ( ) { this . setLocationLatLng ( ) ; } , methods: { setPlace ( loc ) { this .currentLocation = loc; } , setLocationLatLng : function ( ) { navigator.geolocation. getCurrentPosition ( geolocation => { this .center = { lat: geolocation.coords.latitude, lng: geolocation.coords.longitude } ; } ) ; this .locations = [ { lat: 39.7837304 , lng: - 100.4458825 , label: 'United States' } , { lat: 38.6529545 , lng: - 90.2411166 , label: 'St. Louis' } , { lat: 41.3828939 , lng: 2.1774322 , label: 'Barcelona' } , { lat: - 10.3333333 , lng: - 53.2 , label: 'Brazil' } ] ; } } } ; < /script> Update Map Component in App.vue
To display the google map requires registering the component in the main src/App.vue file, you need to import the component, pass the name of the component in the components object and define the component name in the template directive.
<template> <div id= "app" > <DrawGoogleMap / > < /div> < /template> <script> import DrawGoogleMap from "./components/DrawGoogleMap" ; export default { name: 'App' , components: { DrawGoogleMap } } < /script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #000000 ; margin-top: 50px; } < /style> Start Vue Application
Everything was easy. Wasn't it? Now it's time to test the vue google Maps application; for that, you have to start the vue development server.
Let's get started with the following command:
npm run serve You can use following url to run the app on localhost.
http://localhost:8080 Conclusion
This step by step guide has just ended; we hope we were more expressive and you liked our audacity throughout this Vue Google Map example.
We hope you have comprehended blatantly how to add multiple location markers on google maps with the help of vue2-google-maps package and google maps api.
Recommended Posts:
Google Maps Javascript Draw Multiple Lines
Source: https://www.positronx.io/vue-js-draw-multiple-markers-on-google-maps-tutorial/