# x5-gmaps

> A lightweight Google Maps plugin for Vue 2

Latest version **0.7.6** (published 2024-01-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install x5-gmaps
pnpm add x5-gmaps
yarn add x5-gmaps
bun add x5-gmaps
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.7.6 |
| Published | 2024-01-27 |
| First published | 2020-04-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 229.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 101 |
| Author | Keagan Chisnall |
| Maintainers | xon52 |
| Keywords | vue, plugin, map, google |

## Links

- npm: https://www.npmjs.com/package/x5-gmaps
- Repository: https://github.com/xon52/x5-gmaps
- Homepage: https://github.com/xon52/x5-gmaps#readme
- Issues: https://github.com/xon52/x5-gmaps/issues
- npm.io page: https://npm.io/package/x5-gmaps

## Dependencies (3)

- [@types/geojson](https://npm.io/package/@types/geojson.md) ^7946.0.10
- [@types/google.maps](https://npm.io/package/@types/google.maps.md) ^3.53.6
- [vue-property-decorator](https://npm.io/package/vue-property-decorator.md) ^9.1.2

## Recent versions

- 0.7.6 (latest) — 2024-01-27
- 0.7.5 — 2024-01-27
- 0.7.4 — 2023-10-17
- 0.7.3 — 2023-08-04
- 0.7.2 — 2023-04-13
- 0.7.1 — 2023-04-13
- 0.7.0 — 2023-02-01
- 0.6.3 — 2022-10-26
- 0.6.2 — 2022-10-13
- 0.6.1 — 2022-10-04
- 0.6.0 — 2022-03-29
- 0.5.9 — 2021-08-14
- 0.5.8 — 2021-08-12
- 0.5.7 — 2021-08-10
- 0.5.6 — 2021-07-01
- … 54 more at https://npm.io/package/x5-gmaps/versions

## README

# x5-gmaps ([Docs](https://xon52.github.io/x5-gmaps))

### This is a lightweight library to simplify the use of [Google Maps](https://developers.google.com/maps/) in [Vue 2](http://vuejs.org) 🤏🗺️🧩

### For Vue 3 check out [v3-gmaps](https://github.com/xon52/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](https://xon52.github.io/x5-gmaps/guide.html)
- Demo on [codesandbox.io](https://codesandbox.io/s/x5-gmaps-demo-6xww1)
- [Tutorial creating a COVID Heatmap](https://medium.com/javascript-in-plain-english/making-a-covid-map-using-vue-google-maps-89eb70a9f089)
- [Address Autocomplete Example](https://xon5.medium.com/vue-google-maps-and-autocomplete-e9bf0fa3c42e)

<br/>

## Installation

```bash
# npm
npm install x5-gmaps
```

## Deployment

This plugin can be installed like any Vue plugin:

```js
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

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

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

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

## Provided components

- [Map](https://xon52.github.io/x5-gmaps/api/map.html)
- [Marker](https://xon52.github.io/x5-gmaps/api/marker.html)
- [Marker Cluster](https://xon52.github.io/x5-gmaps/api/cluster.html)
- [InfoWindow](https://xon52.github.io/x5-gmaps/api/infoWindow.html)
- [Popup](https://xon52.github.io/x5-gmaps/api/popup.html)
- [Heatmap](https://xon52.github.io/x5-gmaps/api/heatmap.html)
- [Polylines / Polygons](https://xon52.github.io/x5-gmaps/api/polylines.html)
- [Rectangles / Circles](https://xon52.github.io/x5-gmaps/api/shapes.html)
- [Data / GeoJSON](https://xon52.github.io/x5-gmaps/api/data.html)

<br/>

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details

## Authors

- [Keagan Chisnall](https://github.com/xon52)

## 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>

## Star History

[![Star History Chart](https://api.star-history.com/svg?repos=xon52/x5-gmaps&type=Timeline)](https://star-history.com/#xon52/x5-gmaps&Timeline)

---
_Source: https://npm.io/package/x5-gmaps · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._