View example

Before starting

It is important to notice that this repository was forked by the community to keep the library alive. You can get more infor about our decision in this GitHub discussion (opens new window).

Since this library is currently maintained by the community, every help is needed and appreciated! You can follow everything in our GitHub (opens new window).

Installation

You can install this library using npm:

npm install vue-google-maps-community-fork

Pre-requisites

To use this library you will need an API Key. You can learn how to get one here (opens new window).

Configure your enviroment

In your main.js or inside a Nuxt plugin:

import { createApp } from 'vue'
import VueGoogleMaps from 'vue-google-maps-community-fork'

const app = createApp(App)
app
  .use(VueGoogleMaps, {
    load: {
      key: 'YOUR_API_KEY_COMES_HERE',
    },
  })
  .mount('#app')

Configuration for Nuxt

Warning: this is part of the old documentation and I never used Nuxt, please let me know if it will work properly this way.

In order to your Nuxt 3 project work properly with this library, you need to add vue-google-maps-community-fork to build.transpile property in your nuxt.config.ts.

Also, as pointed here (opens new window), you will need to add @googlemaps/markercluster into it as well for your builded project work properly.

export default defineNuxtConfig({
  build: {
    transpile: ['vue-google-maps-community-fork', '@googlemaps/markercluster'],
  },
})

Great! Now you can use anywhere in your components

Here are some examples:

<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,
          },
        }, // A long list of clusters
      ],
    }
  },
}
</script>