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 .

$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



`


Components

$3

If you need to add markers to the Map, add GMapMarker as child of GMapMap component.
`vue


`

$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


`

$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


`

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',
},
})
})
``

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.