@fawmi/vue-google-maps
v0.9.79
Published
Google Map components for Vue.js 3
Downloads
53,443
Maintainers
Readme
Vue 3 Google maps Components
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
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.842120},
}
}
}
</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.842120},
markers: [
{
id: 'dfsldjl3r',
position: {
lat: 51.093048, lng: 6.842120
},
}
]
}
}
}
</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.842120},
markers: [
{
position: {
lat: 51.093048, lng: 6.842120
},
}
, // 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.