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="mapObj.center"
:map-type-id="mapObj.mapTypeId"
:zoom="mapObj.zoom"
>
<marker
v-for="m in markers"
:position="m.position"
@position_changed="m.position=$event"
:draggable="m.draggable"
@g-dblclick="mapObj.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 {
mapObj: {
center: {lat: 10, lng: 10},
mapTypeId: "terrain",
zoom: 7
},
markers: [{
position: {lat: 10.0, lng: 10.0},
draggable:true
}, {
position: {lat: 11.0, lng: 11.0},
draggable:true
}]
}
},
components: {
Map,
Marker
}
}
</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/2.0.3/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/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="center"
:zoom="zoom"
>
</google-map>
<script>
VueGoogleMap.load({
'key': 'YOUR_API_KEY',
})
Vue.component('google-map', VueGoogleMap.Map);
new Vue({
el: 'body',
data:{
center: {lat: 1.38, lng: 103.8},
zoom: 12
}
</script>
</body>
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.
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 !!