Google Maps Plugin For Vue – x5-gmaps

Install & Download:

# NPM
$ npm install x5-gmaps --save

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:

Changelog:

0.7.6 (01/28/2024)

• Bug fix for “appropriate loader” error

0.7.4 (10/17/2023)

• Update packages

0.7.3 (08/04/2023)

• Update

0.7.0 (02/03/2023)

• Updated way maps API is loaded and added additional plugin options

0.6.3 (10/26/2022)

• HOTFIX: extendBounds error

0.6.2 (10/13/2022)

• Added drag, dragstart, and dragend to marker

0.6.1 (10/04/2022)

• Bugfix

0.6.0 (03/29/2022)

• Switch to v3-gmaps for Vue 3

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