# Introduction

@fawmi/vue-google-maps provides a set of Vue.js 3 components wrapping the Google Maps API v3.

The following components are currently supported:

Map, Marker, Cluster, InfoWindow, Circle, Polygon, Polyline, Rectangle, Autocomplete

# Install

To install it via NPM

npm install -S @fawmi/vue-google-maps

# Basic usage

You need an API Key. Learn how to get an Api key (opens new window).

Initialise the plugin 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',
        // language: 'de',

Use it anywhere in your components

      :center="{lat: 51.093048, lng: 6.842120}"
      style="width: 100vw; height: 900px"

<script >
export default {
  name: 'App',
  data() {
    return {
      center: {lat: 51.093048, lng: 6.842120},

# Register google maps events

In order to use Google maps events, they should either be enabled globally

app.use(VueGoogleMaps, {
    load: {
        key: 'YOUR_API_KEY_COMES_HERE',
    autobindAllEvents: true,

Or better yet, they should be activated when needed.

In this example, we enable closeclick event for GMapInfoWindow component and register the event.

    :opened="openedMarkerID === m.id"
    <div>I am in info window {{ m.id }}</div>