Set of mostly used Google Maps components for Vue.js.
We heavily use Google Maps in our projects, so I wanted to have a well maintained Google Maps library.
Checkout vue-map.netlify.app for a detailed documentation or codesandbox for an example
You can install it using npm
npm install -S @fawmi/vue-google-maps
You need an API Key. Learn how to get an Api key .
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')<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>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>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>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
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>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>Many other components are also supported. Checkout docs for more.
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',
},
})
})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.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
