v-maps
Version:
[](https://travis-ci.org/FelipeBohnertPaetzold/v-maps) <a href="https://npmcharts.com/compare/v-maps?minimal=true"><img src="https://img.shields.io/npm/dm/v-maps.svg" alt
242 lines (195 loc) • 9.09 kB
Markdown
# v-maps
[](https://travis-ci.org/FelipeBohnertPaetzold/v-maps)
<a href="https://npmcharts.com/compare/v-maps?minimal=true"><img src="https://img.shields.io/npm/dm/v-maps.svg" alt="Downloads"></a>
<a href="https://www.npmjs.com/package/v-maps"><img src="https://img.shields.io/npm/v/v-maps.svg" alt="Version"></a>
<a href="https://www.npmjs.com/package/v-maps"><img src="https://img.shields.io/npm/l/v-maps.svg" alt="License"></a>
A simple Google Maps component for Vue
#### [Live Demo](https://felipebohnertpaetzold.github.io/v-maps)
### Install
run:
yarn add v-maps
or:
npm install v-maps --save
### Usage
- Globally registration:
```js
import Vue from 'vue'
import VMaps from 'v-maps'
// { key: string, version?: string, libraries?: Array<string> }
const googleApiOptions = { key: 'YOUR_GOOGLE_MAPS_API_KEY' }
Vue.use(VMaps, googleApiOptions)
```
- using global registration in component
```vue
<template>
<v-map :center="{ lat: -23.4070511, lng: -51.9428867 }" />
</template>
```
- using global registration map with markers
```vue
<template>
<v-map :center="center">
<v-marker :position="center" />
</v-map>
</template>
<script>
export default {
computed: {
center() {
return { lat: -23.4070511, lng: -51.9428867 }
}
}
}
</script>
```
- using global registration map with polygon
```vue
<template>
<v-map :center="center">
<v-polygon :paths="polygonPaths" />
</v-map>
</template>
<script>
export default {
data() {
return { polygonPaths: [] }
},
computed: {
center() {
return { lat: -23.4070511, lng: -51.9428867 }
}
}
}
</script>
```
- using global registration map with polyline
```vue
<template>
<v-map :center="center">
<v-polyline :path="polylinePath" />
</v-map>
</template>
<script>
export default {
data() {
return { polylinePath: [] }
},
computed: {
center() {
return { lat: -23.4070511, lng: -51.9428867 }
}
}
}
</script>
```
- Locally registration
```vue
<template>
<v-map :center="center" api-key="YOUR_GOOGLE_MAPS_API_KEY">
<v-marker :position="center" />
<v-polygon :paths="polygonPaths" />
<v-polyline :path="polylinePath" />
</v-map>
</template>
<script>
import { VMap, VMarker, VPolygon, VPolyline } from 'v-maps'
export default {
data() {
return { polygonPaths: [], polylinePath: [] }
},
computed: {
center() {
return { lat: -23.4070511, lng: -51.9428867 }
}
},
components: { VMarker, VMap, VPolygon, VPolyline }
}
</script>
```
### Props
- v-map
| Property | Required | Type | Default | Description
|-------------|-----------|---------|----------|----------------
| center | yes | Object | | The center position for map ```{ lat: -45.2121, lng: -43.2131 }```
| api-key | no | String | | Your api key for google maps
| api-options | no | Object | {} | Options to configure your google, libraries, version ...
| zoom | no | Number | 4 | The zoom level
| map-id | no | String | map | ID of the div on which the map will be mounted
| options | no | Object | {} | Options for map (https://developers.google.com/maps/documentation/javascript/tutorial#MapOptions)
- v-marker
| Property | Required | Type | Default | Description
|-------------|-----------|---------|----------|-----------------
| position | yes | Object | | The marker position ```{ lat: -45.2121, lng: -43.2131 }```
| options | no | Object | {} | Options for marker (https://developers.google.com/maps/documentation/javascript/markers)
| info-window | no | String | | Info view popup for marker (https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple)
- v-polygon
| Property | Required | Type | Default | Description
|-------------|-----------|---------|----------|-----------------
| paths | yes | Array | | Array of objects ```[{ lat: -23.407056, lng: -51.9428867}]```
| draggable | no | Boolean | false | Allows to drag polygon
| editable | no | Boolean | false | Allows to edit polygon's vertexes
| strokeColor | no | String | #00ff00 | Polygon's stroke color
| fillColor | no | String | #00ff00 | Polygon's inner color
| options | no | Object | {} | Other options for polygons (https://developers.google.com/maps/documentation/javascript/reference/polygon#PolygonOptions)
- v-polyline
| Property | Required | Type | Default | Description
|-------------|-----------|---------|----------|-----------------
| path | yes | Array | | Array of objects ```[{ lat: -23.407056, lng: -51.9428867}]```
| draggable | no | Boolean | false | Allows to drag polyline
| editable | no | Boolean | false | Allows to edit polyline's vertexes
| strokeColor | no | String | #00ff00 | Polyne's stroke color
| options | no | Object | {} | Other options for polyline (https://developers.google.com/maps/documentation/javascript/reference/polygon#PolylineOptions)
- v-heatmap
**Important:** To use the heat map it is necessary to include the visualization library when registering the library.
global:
```js
const googleApiOptions = { key: 'YOUR_GOOGLE_MAPS_API_KEY', libraries: ['visualization'] }
Vue.use(VMaps, googleApiOptions)
```
or locally:
```vue
<template>
<v-map :center="center" api-key="YOUR_GOOGLE_MAPS_API_KEY" :apiOptions="{ libraries: ['visualization']}">
<v-heatmap :points="points" />
</v-map>
</template>
```
| Property | Required | Type | Default | Description
|-------------|-----------|---------|----------|-----------------
| points | no | Array | [] | Array of objects ```[{ lat: -23.407056, lng: -51.9428867, weight?: 2}]```
| options | no | Object | {} | Other options for polyline (https://developers.google.com/maps/documentation/javascript/heatmaplayer?#overview)
### Events
- v-map(for more details check the google documentation in https://developers.google.com/maps/documentation/javascript/events)
| Vue Event | Params | Native google map event
|--------------------|---------------------------|------------------------
| bounds-changed | map, event | bounds_changed
| center-changed | map, event | center_changed
| click | map, event | click
| double-click | map, event | dblclick
| drag | map, event | drag
| drag-end | map, event | dragend
| drag-start | map, event | dragstart
| heading-changed | map, event | heading_changed
| idle | map, event | idle
| map-type-id-changed| map, event | maptypeid_changed
| mouse-move | map, event | mousemove
| mouse-out | map, event | mouseout
| mouse-over | map, event | mouseover
| projection-changed | map, event | projection_changed
| resize | map, event | resize
| right-click | map, event | rightclick
| tiles-loaded | map, event | tilesloaded
| tilt-changed | map, event | tilt_changed
| zoom-changed | map, event | zoom-changed
- v-marker
| Vue Event | Params | Info
|--------------------|---------------------------|------------------------
| click | None | This only works if the marker has no info window
- v-polygon
| Vue Event | Params | Native google map event
|--------------------|---------------------------|------------------------
| path-changed | Current paths of polygon |
- v-polyline
| Vue Event | Params | Native google map event
|--------------------|---------------------------|------------------------
| path-changed | Current paths of polyline |