Google Map components for Vue.js 3
npm install @fawmi/vue-google-mapsSet 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.
npm install -S @fawmi/vue-google-maps
`Basic usage
You need an API Key. Learn how to get an Api key .$3
In your
main.js`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')
`
$3
`vue
:center="center"
:zoom="7"
map-type-id="terrain"
style="width: 100vw; height: 900px"
>
`
Components
$3
If you need to add markers to the
Map, add GMapMarker as child of GMapMap component.
`vue
:center="center"
:zoom="7"
map-type-id="terrain"
style="width: 500px; height: 300px"
>
:key="marker.id"
v-for="marker in markers"
:position="marker.position"
/>
`$3
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
:center="center"
:zoom="7"
map-type-id="terrain"
style="width: 500px; height: 300px"
>
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
@click="center=m.position"
/>
`$3
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
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')
``vue
ref="myMapRef"
:center="center"
:zoom="zoom"
style="width: 100%; height: 600px"
>
`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
`
$3
You can pass Map options using options property:See MapOptions for a complete list of available options.
`vue
:options="{
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
fullscreenControl: true,
disableDefaultUi: false
}"
>
`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.
`ts
export default defineNuxtConfig({
build: {
transpile: ['@fawmi/vue-google-maps']
},
})
`Then create a plugin
~/plugin/vueGoogleMaps.ts.`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',
},
})
})
``