Fix binding with the new MarkerClusterer from @googlemaps/markerclusterer

src/components/cluster.vue

@@ -4,72 +4,26 @@
   </div>
 </template>
 <script>
-import { MarkerClusterer } from "@googlemaps/markerclusterer";
-import buildComponent from './build-component.js'
+import {DefaultRenderer, MarkerClusterer, SuperClusterAlgorithm} from '@googlemaps/markerclusterer';
+import buildComponent from './build-component.js';
 
 const props = {
-  maxZoom: {
-    type: Number,
-    twoWay: false,
+  algorithm: {
+    type: Object,
+    default: new SuperClusterAlgorithm({}),
+    noBind: true,
   },
-  batchSizeIE: {
-    type: Number,
-    twoWay: false,
+  renderer: {
+    type: Object,
+    default: new DefaultRenderer,
+    noBind: true,
   },
-  calculator: {
-    type: Function,
-    twoWay: false,
-  },
-  enableRetinaIcons: {
-    type: Boolean,
-    twoWay: false,
-  },
-  gridSize: {
-    type: Number,
-    twoWay: false,
-  },
-  ignoreHidden: {
-    type: Boolean,
-    twoWay: false,
-  },
-  imageExtension: {
-    type: String,
-    twoWay: false,
-  },
-  imagePath: {
-    type: String,
-    twoWay: false,
-  },
-  imageSizes: {
-    type: Array,
-    twoWay: false,
-  },
-  minimumClusterSize: {
-    type: Number,
-    twoWay: false,
-  },
-  styles: {
-    type: Array,
-    twoWay: false,
-  },
-  zoomOnClick: {
-    type: Boolean,
-    twoWay: false,
-  },
-}
+};
 
 const events = [
-  'click',
-  'rightclick',
-  'dblclick',
-  'drag',
-  'dragstart',
-  'dragend',
-  'mouseup',
-  'mousedown',
-  'mouseover',
-  'mouseout',
-]
+  'clusteringbegin',
+  'clusteringend',
+];
 
 export default buildComponent({
   mappedProps: props,
@@ -79,26 +33,30 @@ export default buildComponent({
     if (typeof MarkerClusterer === 'undefined') {
       const errorMessage = 'MarkerClusterer is not installed!';
       console.error(errorMessage);
-      throw new Error(errorMessage)
+      throw new Error(errorMessage);
     }
-    return MarkerClusterer
+    return MarkerClusterer;
   },
-  ctrArgs: ({ map, ...otherOptions }) => [map, [], otherOptions],
+  ctrArgs: ({map, ...otherOptions}) => [{
+    map,
+    algorithm: otherOptions.algorithm,
+    renderer: otherOptions.renderer,
+  }],
   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() {
@@ -106,15 +64,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>