x5-gmaps (Docs)

---------------------------------------------------------------------------------------------------------------

WARNING: No longer maintained

As Vue 2 has reached end of life, and some of the Google Maps components that this uses are now depreciated, this will no longer be maintained.

Thank you for your support and using my thing 💖

---------------------------------------------------------------------------------------------------------------

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

For Vue 3 check out v3-gmaps 💪

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
• Marker Cluster
• 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

Star History