Google Maps Plugin For Vue – x5-gmaps

Description:

The x5-gmaps Vue.js plugin to create Google Maps with custom markers, info windows, popups, heatmap on the app.

How to use it:

1. Import the component.

import x5GMaps from 'x5-gmaps';

2. Register the component and insert your own Google Maps API key.

Vue.use(x5GMaps, 'YOUR_GOOGLE_KEY')
// With libraries
Vue.use(x5GMaps, { key: 'YOUR_GOOGLE_KEY', libraries: ['places'] });

3. Create a basic Google map in your app.

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

Preview:

Google Maps Plugin For Vue - x5-gmaps

Changelog:

0.5.8 (08/12/2021)

  • Added option property to cluster marker

0.5.7 (08/09/2021)

  • Added idle event for map component, some typescript fixes

0.5.6 (07/02/2021)

  • Enhanced cluster marker options, various typescript related udpates changes

0.5.4 (05/23/2021)

  • Fixed dependencies mistake, polygon changedPath event, cluster component error

0.5.2 (05/03/2021)

  • Added a new Marker Cluster component.

0.5.0 (04/24/2021)

  • Updated package

0.4.2 (03/27/2021)

  • Fix: Map breaks if loaded immediately
  • Geo JSON is supported

0.4.0 (03/24/2021)

  • Declaration files and types for Typescript support
  • Library now uses the @Component format of Vue 2 which is needed for Typescript

0.3.34 (03/17/2021)

  • Fix: Marker using wrong option for position changed

0.3.33 (03/13/2021)

  • Update

0.3.32 (02/26/2021)

  • Security and formatting update

0.3.31 (12/20/2020)

  • Event name fix, security update

0.3.30 (12/03/2020)

  • Added Google API promise access through import (gmaps)

0.3.29 (11/15/2020)

  • Info window component fix

0.3.28 (11/11/2020)

  • Added options for marker label and icon

0.3.27 (10/03/2020)

  • Added backwards support for breaking change

0.3.25(09/24/2020)

  • Fixed Marker and Shapes bug when component replaced

0.3.21 (08/27/2020)

  • Added changedPath event to Polygon and Polyline

0.3.19 (08/11/2020)

  • Fixed map for iPhone Safari

0.3.16 (07/21/2020)

  • Update

0.3.15 (07/13/2020)

  • Minor change to rectangle and circle update sensitivity

0.3.14 (07/05/2020)

  • Fixed marker

0.3.13 (06/27/2020)

  • Added custom loading and error slots

0.3.12 (06/25/2020)

  • Added rectangle and circle components

Download Details:

Author: xon52

Live Demo: https://xon52.github.io/x5-gmaps/

Download Link: https://github.com/xon52/x5-gmaps/archive/master.zip

Official Website: https://github.com/xon52/x5-gmaps

Install & Download:

# NPM
$ npm install x5-gmaps --save

You Might Be Interested In:

Add Comment