Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/GuillaumeLeclerc/vue-google-maps
Google maps component for vue with 2-way data binding
https://github.com/GuillaumeLeclerc/vue-google-maps
Last synced: 3 months ago
JSON representation
Google maps component for vue with 2-way data binding
- Host: GitHub
- URL: https://github.com/GuillaumeLeclerc/vue-google-maps
- Owner: GuillaumeLeclerc
- Created: 2015-12-15T17:01:41.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-08-15T13:10:54.000Z (over 6 years ago)
- Last Synced: 2024-04-12T09:33:39.220Z (9 months ago)
- Language: Vue
- Size: 2.44 MB
- Stars: 557
- Watchers: 22
- Forks: 644
- Open Issues: 51
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue-cn - vue-google-maps
- awesome-vue - vue-google-maps - google-maps?style=social) - 带有双向数据绑定Google地图组件 (UI组件)
- awesome-github-vue - vue-google-maps - 带有双向数据绑定Google地图组件 (UI组件)
- awesome-github-vue - vue-google-maps - 带有双向数据绑定Google地图组件 (UI组件)
- awesome - vue-google-maps - 带有双向数据绑定Google地图组件 (UI组件)
README
# vue-google-maps
## Demo:
[Demo in production](http://en.papayapods.com/?utm_source=GtHub&utm_medium=LnK&utm_campaign=V.JS%20Map%20Cmpnt.#!/search/map?city=Lausanne)
[Showcase with a lot of features](http://guillaumeleclerc.github.io/vue-google-maps-example/)
## Presentation
If you want to write google map this way :
```html
```
Or use the power of Vue.js within a google map like this:
```html
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}
}]
}
}
}
```
## Example Project
You can see an project example [here](https://github.com/GuillaumeLeclerc/vue-google-maps-example).
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
#### Reference `vue-google-maps` into your project
If you are using a cool bundler (recommended) you can just do :
```javascript
import {load, Map, Marker} from 'vue-google-maps'
```
Or if you prefer the older ES5 syntax:
```javascript
const VueGoogleMap = require('vue-google-maps')
```
#### 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:
```html
VueGoogleMap.load({
'key': 'YOUR_API_KEY',
})
Vue.component('google-map', VueGoogleMap.Map);
new Vue({
el: 'body',
});
```
#### Set your api key
To enable any `vue-google-maps` components you need to set your api token:
```javascript
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](https://developers.google.com/maps/documentation/javascript/versions#version-rollover-and-version-types),
[libraries](https://developers.google.com/maps/documentation/javascript/libraries),
or for [localisation](https://developers.google.com/maps/documentation/javascript/basics).
## 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](http://en.papayapods.com). Feel free to check out `vue-google-maps` in production !!