# 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', }, }).mount('#app') 

Use it anywhere in your components

<template> <GMapMap :center="{lat: 51.093048, lng: 6.842120}" :zoom="7" map-type-id="terrain" style="width: 100vw; height: 900px" > </GMapMap> </template> <script > export default { name: 'App', data() { return { center: {lat: 51.093048, lng: 6.842120}, } } } </script> 

# 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, }).mount('#app') 

Or better yet, they should be activated when needed.

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

<GMapInfoWindow :closeclick="true" @closeclick="closeMarker" :opened="openedMarkerID === m.id" > <div>I am in info window {{ m.id }}</div> </GMapInfoWindow>