About this library
VGM community fork is a repository to keep the original Vue Google Maps repository 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 I'm sure we will be able to talk with 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.
How to contribute
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 of this library, let me know!
How to stay in touch with the community
You can use Github to communicate with us using issues or discussions, don't be ashamed to ask or express your thoughts or ideas. I created a Discord for the community, feel free to enter and talk with us. Also, you can contact me directly in my email: natspaludo@gmail.com .
TODO
- I need to transform this fork into a npm package, I'll do it ASAP.
- I will edit the original Readme.md to my own version.
- I will make issues and discussions more organized.
Original Readme.md:
Vue 3 Google maps Components
Set of mostly used Google Maps components for Vue.js.
Documentation
Checkout vue-map.netlify.app for a detailed documentation or codesandbox for an example
Installation
You can install it using npm
npm install -S @fawmi/vue-google-maps
Basic usage
You need an API Key. Learn how to get an Api key .
Configure Vue to use the Components
In your main.js
import { createApp } from 'vue'
import VueGoogleMaps from '@fawmi/vue-google-maps'
const app = createApp(App)
app
.use(VueGoogleMaps, {
load: {
key: 'YOUR_API_KEY_COMES_HERE',
},
})
.mount('#app')
Use it anywhere in your components
<template>
<GMapMap :center="center" :zoom="7" map-type-id="terrain" style="width: 100vw; height: 900px">
</GMapMap>
</template>
<script>
export default {
name: 'App',
data() {
return {
center: { lat: 51.093048, lng: 6.84212 },
}
},
}
</script>
Components
Markers
If you need to add markers to the Map, add GMapMarker as child of GMapMap component.
<template>
<GMapMap :center="center" :zoom="7" map-type-id="terrain" style="width: 500px; height: 300px">
<GMapMarker :key="marker.id" v-for="marker in markers" :position="marker.position" />
</GMapMap>
</template>
<script>
export default {
name: 'App',
data() {
return {
center: { lat: 51.093048, lng: 6.84212 },
markers: [
{
id: 'dfsldjl3r',
position: {
lat: 51.093048,
lng: 6.84212,
},
},
],
}
},
}
</script>
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.
<template>
<GMapMap :center="center" :zoom="7" map-type-id="terrain" style="width: 500px; height: 300px">
<GMapCluster>
<GMapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
@click="center = m.position"
/>
</GMapCluster>
</GMapMap>
</template>
<script>
export default {
name: 'App',
data() {
return {
center: { lat: 51.093048, lng: 6.84212 },
markers: [
{
position: {
lat: 51.093048,
lng: 6.84212,
},
}, // Along list of clusters
],
}
},
}
</script>
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.
import { createApp } from 'vue'
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')
<template>
<GMapMap ref="myMapRef" :center="center" :zoom="zoom" style="width: 100%; height: 600px">
<GMapHeatmap :data="heatData"></GMapHeatmap>
</GMapMap>
</template>
<script>
export default {
name: 'App',
setup() {
const center = { lat: 52.2985593, lng: 104.2455337 }
const zoom = 12
const myMapRef = ref()
const heatData = ref([])
watch(myMapRef, (googleMap) => {
if (googleMap) {
googleMap.$mapPromise.then((map) => {
heatData.value = [
{ location: new google.maps.LatLng({ lat: 52.2985593, lng: 104.2455337 }) },
]
})
}
})
return {
center,
zoom,
heatData,
myMapRef,
}
},
}
</script>
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.
<template>
<GMapMap ref="myMapRef" />
</template>
<script>
export default {
mounted() {
console.log(this.$refs.myMapRef)
},
}
</script>
Map options
You can pass Map options using options property:
See MapOptions for a complete list of available options.
<GMapMap
:options="{
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
fullscreenControl: true,
disableDefaultUi: false,
}"
>
</GMapMap>
More components
Many other components are also supported. Checkout docs for more.
Nuxt 3 usage
First add @fawmi/vue-google-maps to build.transpile property in your nuxt.config.ts.
export default defineNuxtConfig({
build: {
transpile: ['@fawmi/vue-google-maps'],
},
})
Then create a plugin ~/plugin/vueGoogleMaps.ts.
import { defineNuxtPlugin } from '#app'
import VueGoogleMaps from '@fawmi/vue-google-maps'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueGoogleMaps, {
load: {
key: 'YOUR_GOOGLE_API_KEY',
},
})
})
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.