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