A simple and lightweight Google Maps plugin for Vue.js – x5-gmaps

Category: Vue.js Vue.js Others | August 10, 2021
Author: xon52
Official Page: Go to website
Last Update: August 10, 2021
License: MIT

vuejs google map component

Description:

A simple and lightweight Google map plugin for Vue.js projects. This plugin can be very useful for you, if you are creating a store locator or you might be creating the contact us page for your project where you will show your users, your office locations etc.

How to use it?

1. Install the component with npm.

npm install x5-gmaps

2. In second step, you will need to import the component.

import x5GMaps from 'x5-gmaps';

3. Now, register the component therefore, you can implement the component in your template.

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

4. Put the component in your template. Like following:

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

Change Log

  • Version 0.5.7 – Added idle event for map component, some typescript fixes
  • Version 0.5.6 – Enhanced cluster marker options, various typescript related updates changes
  • Version 0.5.5 – Fixed broken update
  • Version 0.5.4 – Fixed dependencies mistake, polygon changedPath event, cluster component error
  • Version 0.5.3 – Replaced Window with GlobalThis
  • Version 0.5.2 – Added clustering component
  • Version 0.5.1 – Fix for circle center change not registering