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