# 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, Rectangle

# 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',

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},