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

Updated readme.md

Browse Source
This commit is contained in:
NathanAP
2022-10-13 09:53:49 -03:00
parent 7e482b9b1d
commit 5feade7224
1 changed files with 93 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
README.md
View File

@@ -1,20 +1,40 @@
# About this library
VGM community fork is a repository to keep the original [Vue Google Maps repository](https://github.com/fawmi/vue-google-maps) alive. The original repository is great, but it wasn't maintained anymore, so the community decided to fork it because many of us depends on it.
We tried to contact Fawmi many times in different ways, but we never got an answer. He did a great job and we hope to talk to him about all the situation. All we want is to keep this library alive and better.
You can find more about the community decision [here](https://github.com/fawmi/vue-google-maps/issues/159).
# How to contribute with us
The best way to help this library to grow is reporting bugs throught issues and send PR's to improve it. I'm trying to understand everything that is happening yet, TBH I never had such an important library to keep alive, so if you want to help directly as a contribuitor, let me know!
Issues and discussion will be more organic soon.
I'll create a Discord soon to make things more organized as well.
For now you can contact me in my email: natspaludo@gmail.com
### Original Readme.md ahead
# Vue 3 Google maps Components # Vue 3 Google maps Components
Set of mostly used Google Maps components for Vue.js. Set of mostly used Google Maps components for Vue.js.
#### Why this library exists?
We heavily use Google Maps in our projects, so I wanted to have a well maintained Google Maps library.
## Documentation ## Documentation
Checkout [vue-map.netlify.app](https://vue-map.netlify.app) for a detailed documentation or [codesandbox for an example](https://codesandbox.io/s/vue-3-google-maps-ygpr4?file=/src/main.js) Checkout [vue-map.netlify.app](https://vue-map.netlify.app) for a detailed documentation or [codesandbox for an example](https://codesandbox.io/s/vue-3-google-maps-ygpr4?file=/src/main.js)
## Installation ## Installation
You can install it using npm You can install it using npm
``` ```
npm install -S @fawmi/vue-google-maps 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
@@ -23,58 +43,48 @@ In your `main.js`
```js ```js
import { createApp } from 'vue' import { createApp } from 'vue'
import VueGoogleMaps from '@fawmi/vue-google-maps' import VueGoogleMaps from '@fawmi/vue-google-maps'
const app = createApp(App); const app = createApp(App)
app.use(VueGoogleMaps, { app
.use(VueGoogleMaps, {
load: { load: {
key: 'YOUR_API_KEY_COMES_HERE', key: 'YOUR_API_KEY_COMES_HERE',
}, },
}).mount('#app') })
.mount('#app')
``` ```
### Use it anywhere in your components ### Use it anywhere in your components
```vue ```vue
<template> <template>
<GMapMap <GMapMap :center="center" :zoom="7" map-type-id="terrain" style="width: 100vw; height: 900px">
:center="center"
:zoom="7"
map-type-id="terrain"
style="width: 100vw; height: 900px"
>
</GMapMap> </GMapMap>
</template> </template>
<script > <script>
export default { export default {
name: 'App', name: 'App',
data() { data() {
return { return {
center: {lat: 51.093048, lng: 6.842120}, center: { lat: 51.093048, lng: 6.84212 },
} }
} },
} }
</script> </script>
``` ```
## Components ## Components
### Markers ### Markers
If you need to add markers to the `Map`, add `GMapMarker` as child of `GMapMap` component. If you need to add markers to the `Map`, add `GMapMarker` as child of `GMapMap` component.
```vue ```vue
<template> <template>
<GMapMap <GMapMap :center="center" :zoom="7" map-type-id="terrain" style="width: 500px; height: 300px">
:center="center" <GMapMarker :key="marker.id" v-for="marker in markers" :position="marker.position" />
:zoom="7"
map-type-id="terrain"
style="width: 500px; height: 300px"
>
<GMapMarker
:key="marker.id"
v-for="marker in markers"
:position="marker.position"
/>
</GMapMap> </GMapMap>
</template> </template>
<script> <script>
@@ -82,41 +92,37 @@ export default {
name: 'App', name: 'App',
data() { data() {
return { return {
center: {lat: 51.093048, lng: 6.842120}, center: { lat: 51.093048, lng: 6.84212 },
markers: [ markers: [
{ {
id: 'dfsldjl3r', id: 'dfsldjl3r',
position: { position: {
lat: 51.093048, lng: 6.842120 lat: 51.093048,
lng: 6.84212,
}, },
} },
] ],
} }
} },
} }
</script> </script>
``` ```
### Cluster ### Cluster
If you have too many markers, it is helpful to cluster markers. You can easily cluster markers by wrapping your markers with `GMapCluster` 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" :zoom="7" map-type-id="terrain" style="width: 500px; height: 300px">
:center="center"
:zoom="7"
map-type-id="terrain"
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"
:clickable="true" :clickable="true"
:draggable="true" :draggable="true"
@click="center=m.position" @click="center = m.position"
/> />
</GMapCluster> </GMapCluster>
</GMapMap> </GMapMap>
@@ -126,46 +132,43 @@ export default {
name: 'App', name: 'App',
data() { data() {
return { return {
center: {lat: 51.093048, lng: 6.842120}, center: { lat: 51.093048, lng: 6.84212 },
markers: [ markers: [
{ {
position: { position: {
lat: 51.093048, lng: 6.842120 lat: 51.093048,
lng: 6.84212,
}, },
} }, // Along list of clusters
, // Along list of clusters ],
]
} }
} },
} }
</script> </script>
``` ```
### Heatmap ### Heatmap
If you need to add heatmap layer to the Map, add visualization library in load config and add GMapHeatmap as child of GMapMap component. If you need to add heatmap layer to the Map, add visualization library in load config and add GMapHeatmap as child of GMapMap component.
```js ```js
import { createApp } from 'vue' import { createApp } from 'vue'
import VueGoogleMaps from '@fawmi/vue-google-maps' import VueGoogleMaps from '@fawmi/vue-google-maps'
const app = createApp(App);
app.use(VueGoogleMaps, {
load: {
key: 'YOUR_API_KEY_COMES_HERE',
libraries: "visualization"
},
}).mount('#app')
const app = createApp(App)
app
.use(VueGoogleMaps, {
load: {
key: 'YOUR_API_KEY_COMES_HERE',
libraries: 'visualization',
},
})
.mount('#app')
``` ```
```vue ```vue
<template> <template>
<GMapMap <GMapMap ref="myMapRef" :center="center" :zoom="zoom" style="width: 100%; height: 600px">
ref="myMapRef"
:center="center"
:zoom="zoom"
style="width: 100%; height: 600px"
>
<GMapHeatmap :data="heatData"></GMapHeatmap> <GMapHeatmap :data="heatData"></GMapHeatmap>
</GMapMap> </GMapMap>
</template> </template>
@@ -173,26 +176,26 @@ app.use(VueGoogleMaps, {
export default { export default {
name: 'App', name: 'App',
setup() { setup() {
const center = {lat: 52.2985593, lng: 104.2455337} const center = { lat: 52.2985593, lng: 104.2455337 }
const zoom = 12 const zoom = 12
const myMapRef = ref(); const myMapRef = ref()
const heatData = ref([]) const heatData = ref([])
watch(myMapRef, googleMap => { watch(myMapRef, (googleMap) => {
if (googleMap) { if (googleMap) {
googleMap.$mapPromise.then(map=> { googleMap.$mapPromise.then((map) => {
heatData.value = [ heatData.value = [
{location: new google.maps.LatLng({lat: 52.2985593, lng: 104.2455337})}, { location: new google.maps.LatLng({ lat: 52.2985593, lng: 104.2455337 }) },
]; ]
}) })
} }
}); })
return { return {
center, center,
zoom, zoom,
heatData, heatData,
myMapRef myMapRef,
} }
}, },
} }
@@ -202,7 +205,9 @@ export default {
Checkout docs for more component Checkout docs for more component
## Access map object ## Access map object
If you want to access `google map` object, you can access it by getting ref of the 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>
<GMapMap ref="myMapRef" /> <GMapMap ref="myMapRef" />
@@ -211,16 +216,19 @@ If you want to access `google map` object, you can access it by getting ref of t
export default { export default {
mounted() { mounted() {
console.log(this.$refs.myMapRef) console.log(this.$refs.myMapRef)
} },
} }
</script> </script>
``` ```
### Map options ### Map options
You can pass Map options using options property: 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
<GMapMap ```vue
<GMapMap
:options="{ :options="{
zoomControl: true, zoomControl: true,
mapTypeControl: false, mapTypeControl: false,
@@ -228,7 +236,7 @@ See [MapOptions](https://developers.google.com/maps/documentation/javascript/ref
streetViewControl: false, streetViewControl: false,
rotateControl: false, rotateControl: false,
fullscreenControl: true, fullscreenControl: true,
disableDefaultUi: false disableDefaultUi: false,
}" }"
> >
</GMapMap> </GMapMap>
@@ -242,19 +250,19 @@ Many other components are also supported. Checkout [docs](https://vue-map.netlif
First add `@fawmi/vue-google-maps` to `build.transpile` property in your `nuxt.config.ts`. First add `@fawmi/vue-google-maps` to `build.transpile` property in your `nuxt.config.ts`.
```ts ```ts
export default defineNuxtConfig({ export default defineNuxtConfig({
build: { build: {
transpile: ['@fawmi/vue-google-maps'] transpile: ['@fawmi/vue-google-maps'],
}, },
}) })
``` ```
Then create a plugin `~/plugin/vueGoogleMaps.ts`. Then create a plugin `~/plugin/vueGoogleMaps.ts`.
```ts ```ts
import { defineNuxtPlugin } from '#app' import { defineNuxtPlugin } from '#app'
import VueGoogleMaps from '@fawmi/vue-google-maps' import VueGoogleMaps from '@fawmi/vue-google-maps'
export default defineNuxtPlugin((nuxtApp) => { export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueGoogleMaps, { nuxtApp.vueApp.use(VueGoogleMaps, {
@@ -265,6 +273,6 @@ export default defineNuxtPlugin((nuxtApp) => {
}) })
``` ```
## Contributions ## Contributions
The best way to contribute is to report reproducible bugs, but feature requests and improvement suggestions are always welcome too. And definitely bug fixes and PR are welcome. The best way to contribute is to report reproducible bugs, but feature requests and improvement suggestions are always welcome too. And definitely bug fixes and PR are welcome.