github.com/GuillaumeLeclerc/vue-google-maps
Advanced tools
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
vue-google-maps into your projectIf 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 !!
FAQs
Unknown package
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.
Security News
Socket CTO Ahmad Nassri discusses why supply chain attacks now target developer machines and what AI means for the future of enterprise security.
Security News
Learn the essential steps every developer should take to stay secure on npm and reduce exposure to supply chain attacks.
Security News
Experts push back on new claims about AI-driven ransomware, warning that hype and sponsored research are distorting how the threat is understood.