If you want to write google map this way :
Or use the power of Vue.js within a google map like this:
You can see an project example here.
It uses webpack and vue-loader and was "forked" from the vue-loader-example project
With npm (Recommended)
npm install vue-google-maps
You can append
--save-dev to add it to your depency (if yor project also uses npm)
Just download the
index.js file on the root directory of this repository
vue-google-maps into your project
If you are using a cool bundler (recommended) you can just do :
Or if you prefer the older ES5 syntax:
const VueGoogleMap =
Standalone / CDN
If you are not using any bundler (and you should feel bad). You can just reference the file in a script tag.
The library will be available in a global object called
However you will need to include Vue and Lodash beforehand:
Set your api key
To enable any
vue-google-maps components you need to set your api token:
// OR (depending on how you refereced it)VueGoogleMap
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
This component is sponsored by PapayaPods. Feel free to check out
vue-google-maps in production !!