tomeus / x5-gmaps

A lightweight Google Maps plugin for Vue

x5-gmaps (Docs)

This is a lightweight library to simplify the use of Google Maps in Vue.js 🤏🗺️🧩

Guide / Demo / Tutorials

• Guide: x5-gmaps documentation
• Demo on codesandbox.io
• Tutorial creating a COVID Heatmap
• Address Autocomplete Example

Installation

# npm
npm install x5-gmaps

Deployment

This plugin can be installed like any Vue plugin:

import x5GMaps from 'x5-gmaps';
// Option 1: Just your key
Vue.use(x5GMaps, 'YOUR_GOOGLE_KEY');
// Option 2: With libraries
Vue.use(x5GMaps, { key: 'YOUR_GOOGLE_KEY', libraries: ['places'] });

new Vue({
  el: '#app',
  render: h => h(App)
});

Usage

<template>
  <gmaps-map>
    <gmaps-marker :position="{ lat: -27, lng: 153 }" />
  </gmaps-map>
</template>

import { gmapsMap, gmapsMarker } from 'x5-gmaps';

export default {
  components: { gmapsMap, gmapsMarker }
};

Provided components

• Map
• Marker
• InfoWindow
• Popup
• Heatmap
• Polylines / Polygons
• Rectangles / Circles
• Data / GeoJSON

License

This project is licensed under the MIT License - see the LICENSE file for details

Authors

• Keagan Chisnall

Support