API documentation is still pending, but by and large, unless you are using two-way bindings, you should be able to re-use the code you wrote for Vue 1.x.

Demo:

Demo in production

Showcase with a lot of features

Presentation

If you want to write google map this way :

<gmap-map
  :center="{lat:10, lng:10}"
  :map-type-id="terrain"
  :zoom="7"
></gmap-map>

Or use the power of Vue.js within a google map like this:

<template>
  <gmap-map
    :center="center"
    :zoom="7"
  >
    <gmap-marker
      v-for="m in markers"
      :position.sync="m.position"
      :clickable="true"
      :draggable="true"
      @g-click="center=m.position"
    ></gmap-marker>
  </gmap-map>
</template>

<script>
  import {load, Map, Marker} from 'vue-google-maps'

  load('YOUR_API_TOKEN','OPTIONAL VERSION NUMBER')

  export default {
    components: {
      gmapMap: Map,
      gmapMarker: Marker
    }
    data () {
      return {
        center: {lat: 10.0, lng: 10.0},
        markers: [{
          position: {lat: 10.0, lng: 10.0}
        }, {
          position: {lat: 11.0, lng: 11.0}
        }]
      }
    }
  }
</script>

Testing

There is a non-comprehensive test for the DeferredReady mixin. More tests should be written to help contributors.

Improvements to the tests are welcome :)

Example Project

Refer to the examples.

Installation

With npm (Recommended)

npm install vue-google-maps

You can append --save or --save-dev to add it to your dependency (if yor project also uses npm)

Manually

Just download the index.js file on the root directory of this repository

Basic usage

Reference `vue-google-maps` into your project

If you are using a cool bundler (recommended) you can just do :

import {load, Map, Marker} from 'vue-google-maps'

Or if you prefer the older ES5 syntax:

const VueGoogleMap = require('vue-google-maps')

Standalone / CDN

If you are not using any bundler, include vue-google-maps/dist/vue-google-maps.js instead. The library will be available in a global object called VueGoogleMap. However you will need to include Vue and Lodash beforehand:

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.js"></script>
<script src="dist/vue-google-maps.js"></script>
</head>
<body>

  <div id="root">
    <google-map style="width: 100%; height: 100%; position: absolute; left:0; top:0"
        :center="{lat: 1.38, lng: 103.8}"
        :zoom="12"
    >

    </google-map>
  </div>

  <script>
  VueGoogleMap.load({
      'key': 'YOUR_API_KEY',
  })
  Vue.component('google-map', VueGoogleMap.Map);
  new Vue({
      el: '#root',
  });

  </script>

</body>

Set your api key

To enable any vue-google-maps components you need to set your api token:

load({
  key: 'YOUR_API_TOKEN',
  v: '3.26',                // Google Maps API version
  // libraries: 'places',   // If you want to use places input
})
// OR (depending on how you refereced it)
VueGoogleMap.load({ ... })

The parameters are passed in the query string to the Google Maps API, e.g. to set the version, libraries, or for localisation.

Full documentation

Note on events

All events are prefixed with g-. Example : g-click so it does not interfere with DOM events.

Documentation is up to date: take a look at the wiki

FAQs

What is vue2-google-maps?

Is vue2-google-maps popular?

Is vue2-google-maps well maintained?

Package last updated on 11 Nov 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

vue2-google-maps

vue-google-maps

Vue-2 port of vue-google-maps