vue-google-maps
Demo:
Showcase with a lot of features
Presentation
If you want to write google map this way :
Or use the power of Vue.js within a google map like this:
Example Project
You can see an project example here.
It uses webpack and vue-loader and was "forked" from the vue-loader-example project
Installation
With npm (Recommended)
npm install vue-google-maps
You can append --save
or --save-dev
to add it to your depency (if yor project also uses npm)
Manually
Just download the index.js
file on the root directory of this repository
Basic usage
vue-google-maps
into your project
Reference 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 VueGoogleMap
.
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
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
Sponsor
This component is sponsored by PapayaPods. Feel free to check out vue-google-maps
in production !!