Awesome
x5-gmaps (Docs)
---------------------------------------------------------------------------------------------------------------
<br/> <h1>WARNING: No longer maintained</h1> <h3>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.</h3> <h3>Thank you for your support and using my thing 💖</h3> <br/> <br/>---------------------------------------------------------------------------------------------------------------
<br/> <br/>This is a lightweight library to simplify the use of Google Maps in Vue 2 🤏🗺️🧩
For Vue 3 check out v3-gmaps 💪
<p> <a href="https://npmjs.com/package/x5-gmaps"><img class="center" src="https://img.shields.io/bundlephobia/minzip/x5-gmaps" alt="Bundle size"/></a> <a href="https://npmjs.com/package/x5-gmaps"><img src="https://img.shields.io/npm/dm/x5-gmaps.svg?style=flat" alt="NPM downloads"></a> <a href="https://npmjs.com/package/x5-gmaps"><img src="https://img.shields.io/npm/l/x5-gmaps.svg?style=flat" alt="License"></a> </p> <br/>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
Support
<a href="https://www.buymeacoffee.com/chisnallio" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Coffee" style="height: 30px !important;width: 107px !important;" ></a>