Showcase with a lot of features
If you want to write google map this way :
<map
:center="{lat:10, lng:10}"
:map-type-id="terrain"
:zoom="7"
></map>Or use the power of Vue.js within a google map like this:
<template>
<map
:center="center"
:zoom="7"
>
<marker
v-for="m in markers"
:position.sync="m.position"
:clickable="true"
:draggable="true"
@g-click="center=m.position"
></marker>
</map>
</template>
<script>
import {load, Map, Marker} from 'vue-google-maps'
load('YOUR_API_TOKEN','OPTIONAL VERSION NUMBER')
export default {
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>You can see an project example here.
It uses webpack and vue-loader and was "forked" from the vue-loader-example project
npm install vue-google-maps
You can append --save or --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
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')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:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js"></script>
<script src="dist/vue-google-maps.js"></script>
</head>
<body>
<google-map style="width: 100%; height: 100%; position: absolute; left:0; top:0"
:center="{lat: 1.38, lng: 103.8}"
:zoom="12"
>
</google-map>
<script>
VueGoogleMap.load({
'key': 'YOUR_API_KEY',
})
Vue.component('google-map', VueGoogleMap.Map);
new Vue({
el: 'body',
});
</script>
</body>To enable any vue-google-maps components you need to set your api token:
load({
key: 'YOUR_API_TOKEN',
v: '3.24', // 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.
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 !!