@react-google-maps/marker-clusterer 2.11.0 → 2.11.3

package/src/Clusterer.tsx

@@ -45,7 +45,7 @@ const IMAGE_SIZES = [53, 56, 66, 78, 90]
 
 const CLUSTERER_CLASS = 'cluster'
 
-export class Clusterer extends google.maps.OverlayView {
+export class Clusterer {
   markers: MarkerExtended[]
   clusters: Cluster[]
   listeners: google.maps.MapsEventListener[]
@@ -74,8 +74,6 @@ export class Clusterer extends google.maps.OverlayView {
     optMarkers: MarkerExtended[] = [],
     optOptions: ClustererOptions = {}
   ) {
-    super()
-
     this.extend(Clusterer, google.maps.OverlayView)
 
     this.markers = []
@@ -136,10 +134,9 @@ export class Clusterer extends google.maps.OverlayView {
 
     this.setupStyles()
 
-    this.addMarkers(optMarkers, true)
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    this.setMap(map) // Note: this causes onAdd to be called
+    this.addMarkers(optMarkers, true);
+
+    (this as unknown as google.maps.OverlayView).setMap(map) // Note: this causes onAdd to be called
   }
 
   onZoomChanged() {
@@ -151,9 +148,8 @@ export class Clusterer extends google.maps.OverlayView {
     // event is triggered so the cluster markers that have been removed
     // do not get redrawn. Same goes for a zoom in at maxZoom.
     if (
-      this.getMap()?.getZoom() === (this.get('minZoom') || 0) ||
-
-      this.getMap()?.getZoom() === this.get('maxZoom')
+      (this as unknown as google.maps.OverlayView).getMap()?.getZoom() === ((this as unknown as google.maps.OverlayView).get('minZoom') || 0) ||
+      (this as unknown as google.maps.OverlayView).getMap()?.getZoom() === (this as unknown as google.maps.OverlayView).get('maxZoom')
     ) {
       google.maps.event.trigger(this, 'idle')
     }
@@ -164,7 +160,7 @@ export class Clusterer extends google.maps.OverlayView {
   }
 
   onAdd() {
-    const map = this.getMap()
+    const map = (this as unknown as google.maps.OverlayView).getMap()
 
     this.activeMap = map
 
@@ -240,14 +236,18 @@ export class Clusterer extends google.maps.OverlayView {
 
     for (let i = 0; i < markers.length; i++) {
       const position = markers[i].getPosition()
+
       if (position) {
         bounds.extend(position)
       }
     }
 
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    this.getMap().fitBounds(bounds)
+    const map = (this as unknown as google.maps.OverlayView).getMap()
+
+    if (map !== null && 'fitBounds' in map) {
+      map.fitBounds(bounds)
+    }
+
   }
 
   getGridSize(): number {
@@ -499,9 +499,8 @@ export class Clusterer extends google.maps.OverlayView {
   }
 
   getExtendedBounds(bounds: google.maps.LatLngBounds): google.maps.LatLngBounds {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    const projection = this.getProjection()
+    const projection = (this as unknown as google.maps.OverlayView).getProjection()
+
     // Convert the points to pixels and the extend out by the grid size.
     const trPix = projection.fromLatLngToDivPixel(
       // Turn the bounds into latlng.
@@ -661,18 +660,16 @@ export class Clusterer extends google.maps.OverlayView {
       }
     }
 
-    const map = this.getMap()
+    const map = (this as unknown as google.maps.OverlayView).getMap()
 
     const bounds = map !== null && 'getBounds' in map ? map.getBounds() : null
 
+    const zoom =  map?.getZoom() || 0
     // Get our current map view bounds.
     // Create a new bounds object so we don't affect the map.
     //
     // See Comments 9 & 11 on Issue 3651 relating to this workaround for a Google Maps bug:
-    const mapBounds =
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      map.getZoom() > 3
+    const mapBounds = zoom > 3
         ? new google.maps.LatLngBounds(
             bounds?.getSouthWest(),
             bounds?.getNorthEast()
@@ -719,10 +716,10 @@ export class Clusterer extends google.maps.OverlayView {
     }
   }
 
-  extend<A extends typeof ClusterIcon | typeof Clusterer>(obj1: A, obj2: typeof google.maps.OverlayView) {
-    return function applyExtend(this: A, object: typeof google.maps.OverlayView) {
+  extend<A extends typeof ClusterIcon | typeof Clusterer>(obj1: A, obj2: typeof google.maps.OverlayView): A {
+    return function applyExtend(this: A, object: typeof google.maps.OverlayView): A {
       for (const property in object.prototype) {
-        this.prototype.set(property, object.prototype.get(property))
+        (this.prototype as unknown as google.maps.OverlayView).set(property, object.prototype.get(property))
       }
 
       return this