cnx-public/vue-google-maps-community-fork
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update readme

Browse Source
This commit is contained in:
Fawad Mirzad
2021-02-14 15:26:01 +01:00
parent cd0d9271ec
commit 15b14b30c0
1 changed files with 30 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
README.md
View File

@@ -17,7 +17,7 @@ npm install -S @fawmi/vue-google-maps
## Basic usage ## Basic usage
You need an API Key. Learn how to [get an Api key ](https://developers.google.com/maps/documentation/javascript/get-api-key). You need an API Key. Learn how to [get an Api key ](https://developers.google.com/maps/documentation/javascript/get-api-key).
##Configure Vue to use the Components ### Configure Vue to use the Components
In your `main.js` or inside a Nuxt plugin: In your `main.js` or inside a Nuxt plugin:
@@ -33,17 +33,17 @@ app.use(VueGoogleMaps, {
}).mount('#app') }).mount('#app')
``` ```
## Use it anywhere in your components ### Use it anywhere in your components
```vue ```vue
<template> <template>
<GmapMap <GMapMap
:center="{lat: 51.093048, lng: 6.842120}" :center="{lat: 51.093048, lng: 6.842120}"
:zoom="7" :zoom="7"
map-type-id="terrain" map-type-id="terrain"
style="width: 100vw; height: 900px" style="width: 100vw; height: 900px"
> >
</GmapMap> </GMapMap>
</template> </template>
<script > <script >
@@ -57,27 +57,25 @@ export default {
} }
</script> </script>
``` ```
## Components
### Markers ### Markers
If you need to gain access to the `Map` instance (e.g. to call `panToBounds`, `panTo`): If you need to add markers to the `Map`, add `GMapMarker` as child of `GMapMap` component.
```vue ```vue
<template> <template>
<GmapMap <GMapMap
:center="center" :center="center"
:zoom="7" :zoom="7"
map-type-id="terrain" map-type-id="terrain"
style="width: 500px; height: 300px" style="width: 500px; height: 300px"
> >
<GmapMarker <GMapMarker
:key="index" :key="marker.id"
v-for="(m, index) in markers" v-for="marker in markers"
:position="m.position" :position="marker.position"
:clickable="true"
:draggable="true"
@click="center=m.position"
/> />
</GmapMap> </GMapMap>
</template> </template>
<script> <script>
export default { export default {
@@ -87,6 +85,7 @@ export default {
center: {lat: 51.093048, lng: 6.842120}, center: {lat: 51.093048, lng: 6.842120},
markers: [ markers: [
{ {
id: 'dfsldjl3r',
position: { position: {
lat: 51.093048, lng: 6.842120 lat: 51.093048, lng: 6.842120
}, },
@@ -95,21 +94,23 @@ export default {
} }
} }
} }
</script>
``` ```
### Cluster ### Cluster
If you have too many markers, it is helpfull to cluster markers. You can easily cluster maps by wrapping your markers with Cluster component. If you have too many markers, it is helpful to cluster markers. You can easily cluster markers by wrapping your markers with `GMapCluster` component.
```vue ```vue
<template> <template>
<GmapMap <GMapMap
:center="center" :center="center"
:zoom="7" :zoom="7"
map-type-id="terrain" map-type-id="terrain"
style="width: 500px; height: 300px" style="width: 500px; height: 300px"
> >
<GmapCluster> <GMapCluster>
<GmapMarker <GMapMarker
:key="index" :key="index"
v-for="(m, index) in markers" v-for="(m, index) in markers"
:position="m.position" :position="m.position"
@@ -117,8 +118,8 @@ If you have too many markers, it is helpfull to cluster markers. You can easily
:draggable="true" :draggable="true"
@click="center=m.position" @click="center=m.position"
/> />
</GmapCluster> </GMapCluster>
</GmapMap> </GMapMap>
</template> </template>
<script> <script>
export default { export default {
@@ -137,16 +138,18 @@ export default {
} }
} }
} }
</script>
``` ```
If you need to gain access to the `google` object, you can access it by getting ref of the map object.
Checkout docs for more component
## Access map object
If you want to access `google map` object, you can access it by getting ref of the map object.
```vue ```vue
<template> <template>
<GmapMarker ref="myMarker" <GMapMarker ref="myMarker" />
/>
</template> </template>
<script> <script>
import {gmapApi} from 'vue2-google-maps'
export default { export default {
mounted() { mounted() {
console.log(this.$refs.myMarker) console.log(this.$refs.myMarker)
@@ -159,7 +162,7 @@ You can pass Map options using options property:
See [MapOptions](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions) for a complete list of available options. See [MapOptions](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions) for a complete list of available options.
```vue ```vue
<GmapMap <GMapMap
:options="{ :options="{
zoomControl: true, zoomControl: true,
mapTypeControl: false, mapTypeControl: false,
@@ -170,19 +173,7 @@ See [MapOptions](https://developers.google.com/maps/documentation/javascript/ref
disableDefaultUi: false disableDefaultUi: false
}" }"
> >
</GmapMap> </GMapMap>
```
Add region and language localization:
Example for [Localization](https://developers.google.com/maps/documentation/javascript/localization):
```vue
Vue.use(VueGoogleMaps, {
load: {
region: 'VI',
language: 'vi',
},
})
``` ```
## Contributions ## Contributions