Add missing deps, fix errors from eslint

src/components/autocomplete.vue

@@ -1,16 +1,8 @@
 <template>
   <template v-if="$slots['input']">
-    <slot
-      name="input"
-      v-bind="$attrs"
-    ></slot>
+    <slot name="input" v-bind="$attrs"></slot>
   </template>
-  <input
-    v-else-if="!$slots['input']"
-    ref="input"
-    v-bind="$attrs"
-    v-on="$attrs"
-  />
+  <input v-else-if="!$slots['input']" ref="input" v-bind="$attrs" v-on="$attrs" />
 </template>
 
 <script>
@@ -49,15 +41,15 @@ const props = {
 
 export default {
   mounted() {
-    const _this = this;
+    const _this = this
     this.$gmapApiPromiseLazy().then(() => {
       // get correct input from fallback or slot
       let refInput = _this.$refs.input
       if (_this.$slots.input) {
-        const refName = _this.$slots.input()[0].props.ref;
-        const scopedInput = _this.$slots.input()[0].ref.i.ctx.$refs[refName];
+        const refName = _this.$slots.input()[0].props.ref
+        const scopedInput = _this.$slots.input()[0].ref.i.ctx.$refs[refName]
         if (scopedInput) {
-          refInput = scopedInput.$el.getElementsByTagName('input')[0];
+          refInput = scopedInput.$el.getElementsByTagName('input')[0]
         }
       }
       if (this.selectFirstOnEnter) {

src/components/build-component.js

@@ -44,17 +44,8 @@ import MapElementMixin from './mapElementMixin'
  *
  */
 export default function (options) {
-  const {
-    mappedProps,
-    name,
-    ctr,
-    ctrArgs,
-    events,
-    beforeCreate,
-    afterCreate,
-    props,
-    ...rest
-  } = options
+  const { mappedProps, name, ctr, ctrArgs, events, beforeCreate, afterCreate, props, ...rest } =
+    options
 
   const promiseName = `$${name}Promise`
   const instanceName = `$${name}Object`

src/components/cluster.vue

@@ -4,8 +4,12 @@
   </div>
 </template>
 <script>
-import {DefaultRenderer, MarkerClusterer, SuperClusterAlgorithm} from '@googlemaps/markerclusterer';
-import buildComponent from './build-component.js';
+import {
+  DefaultRenderer,
+  MarkerClusterer,
+  SuperClusterAlgorithm,
+} from '@googlemaps/markerclusterer'
+import buildComponent from './build-component.js'
 
 const props = {
   algorithm: {
@@ -15,15 +19,12 @@ const props = {
   },
   renderer: {
     type: Object,
-    default: new DefaultRenderer,
+    default: new DefaultRenderer(),
     noBind: true,
   },
-};
+}
 
-const events = [
-  'clusteringbegin',
-  'clusteringend',
-];
+const events = ['clusteringbegin', 'clusteringend']
 
 export default buildComponent({
   mappedProps: props,
@@ -31,28 +32,28 @@ export default buildComponent({
   name: 'cluster',
   ctr: () => {
     if (typeof MarkerClusterer === 'undefined') {
-      const errorMessage = 'MarkerClusterer is not installed!';
-      console.error(errorMessage);
-      throw new Error(errorMessage);
+      const errorMessage = 'MarkerClusterer is not installed!'
+      console.error(errorMessage)
+      throw new Error(errorMessage)
     }
-    return MarkerClusterer;
+    return MarkerClusterer
   },
-  ctrArgs: ({map, ...otherOptions}) => [{map, ...otherOptions}],
+  ctrArgs: ({ map, ...otherOptions }) => [{ map, ...otherOptions }],
   afterCreate(inst) {
     const reinsertMarkers = () => {
-      const oldMarkers = inst.getMarkers();
-      inst.clearMarkers();
-      inst.addMarkers(oldMarkers);
-    };
+      const oldMarkers = inst.getMarkers()
+      inst.clearMarkers()
+      inst.addMarkers(oldMarkers)
+    }
     for (let prop in props) {
       if (props[prop].twoWay) {
-        this.$on(prop.toLowerCase() + '_changed', reinsertMarkers);
+        this.$on(prop.toLowerCase() + '_changed', reinsertMarkers)
       }
     }
   },
   updated() {
     if (this.$clusterObject) {
-      this.$clusterObject.render();
+      this.$clusterObject.render()
     }
   },
   beforeUnmount() {
@@ -60,14 +61,14 @@ export default buildComponent({
     if (this.$children && this.$children.length) {
       this.$children.forEach((marker) => {
         if (marker.$clusterObject === this.$clusterObject) {
-          marker.$clusterObject = null;
+          marker.$clusterObject = null
         }
-      });
+      })
     }
 
     if (this.$clusterObject) {
-      this.$clusterObject.clearMarkers();
+      this.$clusterObject.clearMarkers()
     }
   },
-});
+})
 </script>

src/components/heatmap.js

@@ -4,16 +4,15 @@ const props = {
   options: {
     type: Object,
     twoWay: false,
-    default: () => {
-    },
+    default: () => {},
   },
   data: {
     type: Array,
-    twoWay: true
+    twoWay: true,
   },
 }
 
-const events = [];
+const events = []
 
 export default buildComponent({
   mappedProps: props,
@@ -21,5 +20,3 @@ export default buildComponent({
   ctr: () => google.maps.visualization.HeatmapLayer,
   events,
 })
-
-

src/components/map.vue

@@ -103,7 +103,19 @@ const customMethods = {
 
 export default {
   mixins: [mountableMixin],
-  props: mappedPropsToVueProps({...props, ...events.reduce((obj, eventName) => ({...obj, [`on${eventName.charAt(0).toUpperCase()}${eventName.slice(1)}`.replace(/[-_]+(.)?/g, (_, c) => c ? c.toUpperCase() : '')]: Function}), {}) } ),
+  props: mappedPropsToVueProps({
+    ...props,
+    ...events.reduce(
+      (obj, eventName) => ({
+        ...obj,
+        [`on${eventName.charAt(0).toUpperCase()}${eventName.slice(1)}`.replace(
+          /[-_]+(.)?/g,
+          (_, c) => (c ? c.toUpperCase() : '')
+        )]: Function,
+      }),
+      {}
+    ),
+  }),
   inheritAttrs: false,
 
   provide() {

src/components/marker.vue

@@ -1,10 +1,15 @@
 <template>
-  <div @click="()=> {console.log('sdfsd')}">
+  <div
+    @click="
+      () => {
+        console.log('sdfsd')
+      }
+    "
+  >
     <slot></slot>
   </div>
 </template>
 <script>
-
 import buildComponent from './build-component.js'
 
 const props = {
@@ -112,10 +117,10 @@ export default buildComponent({
   },
 
   afterCreate(inst) {
-    events.forEach((event)=> {
-      inst.addListener(event, (payload)=> {
+    events.forEach((event) => {
+      inst.addListener(event, (payload) => {
         this.$emit(event, payload)
-      });
+      })
     })
     if (this.$clusterPromise) {
       this.$clusterPromise.then((co) => {

src/components/polygon.js

@@ -83,9 +83,11 @@ export default buildComponent({
           eventListeners.push([mvcArray, mvcArray.addListener('set_at', updatePaths)])
 
           clearEvents = () => {
-            eventListeners.map((
-              [obj, listenerHandle] // eslint-disable-line no-unused-vars
-            ) => google.maps.event.removeListener(listenerHandle))
+            eventListeners.map(
+              (
+                [obj, listenerHandle] // eslint-disable-line no-unused-vars
+              ) => google.maps.event.removeListener(listenerHandle)
+            )
           }
         }
       },
@@ -115,9 +117,11 @@ export default buildComponent({
           eventListeners.push([mvcPath, mvcPath.addListener('set_at', updatePaths)])
 
           clearEvents = () => {
-            eventListeners.map((
-              [obj, listenerHandle] // eslint-disable-line no-unused-vars
-            ) => google.maps.event.removeListener(listenerHandle))
+            eventListeners.map(
+              (
+                [obj, listenerHandle] // eslint-disable-line no-unused-vars
+              ) => google.maps.event.removeListener(listenerHandle)
+            )
           }
         }
       },

src/components/polyline.js

@@ -67,9 +67,11 @@ export default buildComponent({
           eventListeners.push([mvcPath, mvcPath.addListener('set_at', updatePaths)])
 
           clearEvents = () => {
-            eventListeners.map((
-              [obj, listenerHandle] // eslint-disable-line no-unused-vars
-            ) => google.maps.event.removeListener(listenerHandle))
+            eventListeners.map(
+              (
+                [obj, listenerHandle] // eslint-disable-line no-unused-vars
+              ) => google.maps.event.removeListener(listenerHandle)
+            )
           }
         }
       },

src/load-google-maps.js

@@ -1,16 +1,15 @@
-import {Env} from "./utils/env";
-import {createMapScript} from "./utils/create-map-script";
+import { Env } from './utils/env'
+import { createMapScript } from './utils/create-map-script'
 
 let isApiSetUp = false
-export function loadGMapApi (options) {
-
+export function loadGMapApi(options) {
   if (Env.isServer()) {
-    return;
+    return
   }
 
   if (!isApiSetUp) {
     isApiSetUp = true
-    const googleMapScript = createMapScript(options);
+    const googleMapScript = createMapScript(options)
     document.head.appendChild(googleMapScript)
   } else {
     throw new Error('You already started the loading of google maps')

src/main.js

@@ -15,8 +15,8 @@ import Autocomplete from './components/autocomplete.vue'
 import MapElementMixin from './components/mapElementMixin'
 import buildComponent from './components/build-component'
 import MountableMixin from './utils/mountableMixin'
-import {Env} from "./utils/env";
-let GMapApi = null;
+import { Env } from './utils/env'
+let GMapApi = null
 
 export {
   loadGMapApi,

src/utils/bindEvents.js

@@ -1,6 +1,9 @@
 export default (vueInst, googleMapsInst, events) => {
   for (let eventName of events) {
-    const propName = `on${eventName.charAt(0).toUpperCase()}${eventName.slice(1)}`.replace(/[-_]+(.)?/g, (_, c) => c ? c.toUpperCase() : '');
+    const propName = `on${eventName.charAt(0).toUpperCase()}${eventName.slice(1)}`.replace(
+      /[-_]+(.)?/g,
+      (_, c) => (c ? c.toUpperCase() : '')
+    )
 
     if (vueInst.$props[propName] || vueInst.$attrs[propName]) {
       googleMapsInst.addListener(eventName, (ev) => {

src/utils/bindProps.js

@@ -1,5 +1,5 @@
 import WatchPrimitiveProperties from '../utils/WatchPrimitiveProperties'
-import {Str} from "./string";
+import { Str } from './string'
 
 export function getPropsValues(vueInst, props) {
   return Object.keys(props).reduce((acc, prop) => {
@@ -39,7 +39,8 @@ export function bindProps(vueInst, googleMapsInst, props) {
     // although this may really be the user's responsibility
     if (type !== Object || !trackProperties) {
       // Track the object deeply
-      vueInst.$watch(attribute,
+      vueInst.$watch(
+        attribute,
         () => {
           const attributeValue = vueInst[attribute]
 

src/utils/create-map-script.js

@@ -15,11 +15,12 @@ export function createMapScript(options) {
   let url =
     baseUrl +
     Object.keys(options)
-      .map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(options[key])).join('&')
+      .map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(options[key]))
+      .join('&')
 
   googleMapScript.setAttribute('src', url)
   googleMapScript.setAttribute('async', '')
   googleMapScript.setAttribute('defer', '')
 
-  return googleMapScript;
+  return googleMapScript
 }

src/utils/env.js

@@ -1,5 +1,5 @@
 export class Env {
   static isServer() {
-    return typeof document === 'undefined';
+    return typeof document === 'undefined'
   }
 }

src/utils/event.js

@@ -1,3 +0,0 @@
-export class eventUtils {
-
-}

src/utils/lazyValue.js

@@ -1,15 +1,15 @@
 // lazy-value by sindresorhus
 
-export default fn => {
-  let called = false;
-  let result;
+export default (fn) => {
+  let called = false
+  let result
 
   return () => {
     if (!called) {
-      called = true;
-      result = fn();
+      called = true
+      result = fn()
     }
 
-    return result;
-  };
-};
+    return result
+  }
+}

src/utils/load-google-maps.js

@@ -1,143 +1,136 @@
 export class Loader {
-    constructor({
-                    apiKey,
-                    libraries = [],
-                    language,
-                    region,
-                    version,
-                    mapIds
-                }) {
-        // @ts-ignore
-        this.callbacks = [];
-        this.CALLBACK = "__googleMapsCallback";
-        this.version = version;
-        this.apiKey = apiKey;
-        this.libraries = libraries;
-        // @ts-ignore
-        this.language = language;
-        // @ts-ignore
-        this.region = region;
-        this.URL = 'https://maps.googleapis.com/maps/api/js';
-        // @ts-ignore
-        this.mapIds = mapIds;
-    }
-    /**
-     * CreateUrl returns the Google Maps JavaScript API script url given the [[LoaderOptions]].
-     *
-     * @ignore
-     */
-    createUrl() {
-        let url = this.URL;
-        console.log(this.URL)
+  constructor({ apiKey, libraries = [], language, region, version, mapIds }) {
+    // @ts-ignore
+    this.callbacks = []
+    this.CALLBACK = '__googleMapsCallback'
+    this.version = version
+    this.apiKey = apiKey
+    this.libraries = libraries
+    // @ts-ignore
+    this.language = language
+    // @ts-ignore
+    this.region = region
+    this.URL = 'https://maps.googleapis.com/maps/api/js'
+    // @ts-ignore
+    this.mapIds = mapIds
+  }
+  /**
+   * CreateUrl returns the Google Maps JavaScript API script url given the [[LoaderOptions]].
+   *
+   * @ignore
+   */
+  createUrl() {
+    let url = this.URL
+    console.log(this.URL)
 
-        url += `?callback=${this.CALLBACK}`;
+    url += `?callback=${this.CALLBACK}`
 
-        if (this.apiKey) {
-            url += `&key=${this.apiKey}`;
-        }
-
-        if (this.libraries.length > 0) {
-            url += `&libraries=${this.libraries.join(",")}`;
-        }
-
-        if (this.language) {
-            url += `&language=${this.language}`;
-        }
-
-        if (this.region) {
-            url += `&region=${this.region}`;
-        }
-
-        if (this.version) {
-            url += `&v=${this.version}`;
-        }
-
-        if (this.mapIds) {
-            url += `&map_ids=${this.mapIds.join(",")}`;
-        }
-
-        return url;
+    if (this.apiKey) {
+      url += `&key=${this.apiKey}`
     }
 
-    /**
-     * Load the Google Maps JavaScript API script and return a Promise.
-     */
-    load() {
-        return this.loadPromise();
+    if (this.libraries.length > 0) {
+      url += `&libraries=${this.libraries.join(',')}`
     }
 
-    /**
-     * Load the Google Maps JavaScript API script and return a Promise.
-     *
-     * @ignore
-     */
-    loadPromise() {
-        return new Promise((resolve, reject) => {
-            this.loadCallback((err) => {
-                if (!err) {
-                    resolve();
-                } else {
-                    reject(err);
-                }
-            });
-        });
+    if (this.language) {
+      url += `&language=${this.language}`
     }
 
-    /**
-     * Load the Google Maps JavaScript API script with a callback.
-     */
-    loadCallback(fn) {
-        this.callbacks.push(fn);
-        this.execute();
+    if (this.region) {
+      url += `&region=${this.region}`
     }
 
-    /**
-     * Set the script on document.
-     */
-    setScript() {
-        const url = this.createUrl();
-        const script = document.createElement("script");
-
-        script.type = "text/javascript";
-        script.src = url;
-        // @ts-ignore
-        script.onerror = this.loadErrorCallback.bind(this);
-        script.defer = true;
-        script.async = true;
-        document.head.appendChild(script);
+    if (this.version) {
+      url += `&v=${this.version}`
     }
 
-    loadErrorCallback(e) {
-        this.onerrorEvent = e;
-        this.callback();
+    if (this.mapIds) {
+      url += `&map_ids=${this.mapIds.join(',')}`
     }
 
-    setCallback() {
-        window.__googleMapsCallback = this.callback.bind(this);
-    }
+    return url
+  }
 
-    callback() {
-        this.done = true;
-        this.loading = false;
+  /**
+   * Load the Google Maps JavaScript API script and return a Promise.
+   */
+  load() {
+    return this.loadPromise()
+  }
 
-        this.callbacks.forEach(cb => {
-            cb(this.onerrorEvent);
-        });
-
-        this.callbacks = [];
-    }
-
-    execute() {
-        if (this.done) {
-            this.callback();
+  /**
+   * Load the Google Maps JavaScript API script and return a Promise.
+   *
+   * @ignore
+   */
+  loadPromise() {
+    return new Promise((resolve, reject) => {
+      this.loadCallback((err) => {
+        if (!err) {
+          resolve()
         } else {
-            if (this.loading) {
-                // do nothing but wait
-            } else {
-                this.loading = true;
-                this.setCallback();
-                this.setScript();
-            }
+          reject(err)
         }
+      })
+    })
+  }
+
+  /**
+   * Load the Google Maps JavaScript API script with a callback.
+   */
+  loadCallback(fn) {
+    this.callbacks.push(fn)
+    this.execute()
+  }
+
+  /**
+   * Set the script on document.
+   */
+  setScript() {
+    const url = this.createUrl()
+    const script = document.createElement('script')
+
+    script.type = 'text/javascript'
+    script.src = url
+    // @ts-ignore
+    script.onerror = this.loadErrorCallback.bind(this)
+    script.defer = true
+    script.async = true
+    document.head.appendChild(script)
+  }
+
+  loadErrorCallback(e) {
+    this.onerrorEvent = e
+    this.callback()
+  }
+
+  setCallback() {
+    window.__googleMapsCallback = this.callback.bind(this)
+  }
+
+  callback() {
+    this.done = true
+    this.loading = false
+
+    this.callbacks.forEach((cb) => {
+      cb(this.onerrorEvent)
+    })
+
+    this.callbacks = []
+  }
+
+  execute() {
+    if (this.done) {
+      this.callback()
+    } else {
+      if (this.loading) {
+        // do nothing but wait
+      } else {
+        this.loading = true
+        this.setCallback()
+        this.setScript()
+      }
     }
+  }
 }

src/utils/mountableMixin.js

@@ -29,7 +29,7 @@ export default {
       this.resize()
     },
     isFunction(functionToCheck) {
-      return functionToCheck && {}.toString.call(functionToCheck) === '[object Function]';
+      return functionToCheck && {}.toString.call(functionToCheck) === '[object Function]'
     },
     _delayedResizeCallback() {
       this.$nextTick(() => this._resizeCallback())