@fawmi/vue-google-maps
TypeScript icon, indicating that this package has built-in type declarations

0.9.79 • Public • Published

Vue 3 Google maps Components

Set of mostly used Google Maps components for Vue.js.

Why this library exists?

We heavily use Google Maps in our projects, so I wanted to have a well maintained Google Maps library.

Documentation

Checkout vue-map.netlify.app for a detailed documentation or codesandbox for an example

Installation

You can install it using npm

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

Basic usage

You need an API Key. Learn how to get an Api key .

Configure Vue to use the Components

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="center"
      :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>

Components

Markers

If you need to add markers to the Map, add GMapMarker as child of GMapMap component.

<template>
  <GMapMap
      :center="center"
      :zoom="7"
      map-type-id="terrain"
      style="width: 500px; height: 300px"
  >
    <GMapMarker
        :key="marker.id"
        v-for="marker in markers"
        :position="marker.position"
    />
  </GMapMap>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      center: {lat: 51.093048, lng: 6.842120},
      markers: [
        {
          id: 'dfsldjl3r',
          position: {
            lat: 51.093048, lng: 6.842120
          },
        }
      ]
    }
  }
}
</script>

Cluster

If you have too many markers, it is helpful to cluster markers. You can easily cluster markers by wrapping your markers with GMapCluster component.

<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.842120},
      markers: [
        {
          position: {
            lat: 51.093048, lng: 6.842120
          },
        }
        , // Along list of clusters
      ]
    }
  }
}
</script>

Heatmap

If you need to add heatmap layer to the Map, add visualization library in load config and add GMapHeatmap as child of GMapMap component.

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',
    libraries: "visualization"
  },
}).mount('#app')
<template>
  <GMapMap
    ref="myMapRef"
    :center="center"
    :zoom="zoom"
    style="width: 100%; height: 600px"
  >
    <GMapHeatmap :data="heatData"></GMapHeatmap>
  </GMapMap>
</template>
<script>
export default {
  name: 'App',
  setup() {
    const center = {lat: 52.2985593, lng: 104.2455337}
    const zoom = 12
    const myMapRef = ref();
    const heatData = ref([])

    watch(myMapRef, googleMap => {
      if (googleMap) {
        googleMap.$mapPromise.then(map=> {
          heatData.value = [
            {location: new google.maps.LatLng({lat: 52.2985593, lng: 104.2455337})},
          ];
        })
      }
    });

    return {
      center,
      zoom,
      heatData,
      myMapRef
    }
  },
}
</script>

Checkout docs for more component

Access map object

If you want to access google map object, you can access it by getting ref of the map object.

<template>
  <GMapMap ref="myMapRef" />
</template>
<script>
export default {
  mounted() {
    console.log(this.$refs.myMapRef)
  }
}
</script>

Map options

You can pass Map options using options property:

See MapOptions for a complete list of available options.

<GMapMap
 :options="{
   zoomControl: true,
   mapTypeControl: false,
   scaleControl: false,
   streetViewControl: false,
   rotateControl: false,
   fullscreenControl: true,
   disableDefaultUi: false
 }"
>
</GMapMap>

More components

Many other components are also supported. Checkout docs for more.

Nuxt 3 usage

First add @fawmi/vue-google-maps to build.transpile property in your nuxt.config.ts.

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

Then create a plugin ~/plugin/vueGoogleMaps.ts.

import { defineNuxtPlugin } from '#app'
import  VueGoogleMaps from '@fawmi/vue-google-maps'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueGoogleMaps, {
    load: {
      key: 'YOUR_GOOGLE_API_KEY',
    },
  })
})

Contributions

The best way to contribute is to report reproducible bugs, but feature requests and improvement suggestions are always welcome too. And definitely bug fixes and PR are welcome.

Package Sidebar

Install

npm i @fawmi/vue-google-maps

Weekly Downloads

14,658

Version

0.9.79

License

MIT

Unpacked Size

56.4 kB

Total Files

39

Last publish

Collaborators

  • fawmi