npm - @react-google-maps/marker-clusterer - Versions diffs - 2.9.0 → 2.11.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/dist/esm.js CHANGED Viewed

@@ -1,108 +1,153 @@
-var ClusterIcon = /** @class */ (function () {
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise */
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+function __extends(d, b) {
+    if (typeof b !== "function" && b !== null)
+        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+var ClusterIcon = /** @class */ (function (_super) {
+    __extends(ClusterIcon, _super);
     function ClusterIcon(cluster, styles) {
+        var _this = _super.call(this) || this;
         cluster.getClusterer().extend(ClusterIcon, google.maps.OverlayView);
-        this.cluster = cluster;
-        this.clusterClassName = this.cluster.getClusterer().getClusterClass();
-        this.className = this.clusterClassName;
-        this.styles = styles;
-        this.center = undefined;
-        this.div = null;
-        this.sums = null;
-        this.visible = false;
-        this.boundsChangedListener = null;
-        this.url = '';
-        this.height = 0;
-        this.width = 0;
-        this.anchorText = [0, 0];
-        this.anchorIcon = [0, 0];
-        this.textColor = 'black';
-        this.textSize = 11;
-        this.textDecoration = 'none';
-        this.fontWeight = 'bold';
-        this.fontStyle = 'normal';
-        this.fontFamily = 'Arial,sans-serif';
-        this.backgroundPosition = '0 0';
-        // @ts-ignore
-        this.setMap(cluster.getMap()); // Note: this causes onAdd to be called
+        _this.cluster = cluster;
+        _this.clusterClassName = _this.cluster.getClusterer().getClusterClass();
+        _this.className = _this.clusterClassName;
+        _this.styles = styles;
+        _this.center = undefined;
+        _this.div = null;
+        _this.sums = null;
+        _this.visible = false;
+        _this.boundsChangedListener = null;
+        _this.url = '';
+        _this.height = 0;
+        _this.width = 0;
+        _this.anchorText = [0, 0];
+        _this.anchorIcon = [0, 0];
+        _this.textColor = 'black';
+        _this.textSize = 11;
+        _this.textDecoration = 'none';
+        _this.fontWeight = 'bold';
+        _this.fontStyle = 'normal';
+        _this.fontFamily = 'Arial,sans-serif';
+        _this.backgroundPosition = '0 0';
+        _this.cMouseDownInCluster = null;
+        _this.cDraggingMapByCluster = null;
+        _this.timeOut = null;
+        _this.setMap(cluster.getMap()); // Note: this causes onAdd to be called
+        return _this;
     }
+    ClusterIcon.prototype.onBoundsChanged = function () {
+        this.cDraggingMapByCluster = this.cMouseDownInCluster;
+    };
+    ClusterIcon.prototype.onMouseDown = function () {
+        this.cMouseDownInCluster = true;
+        this.cDraggingMapByCluster = false;
+    };
+    ClusterIcon.prototype.onClick = function (event) {
+        this.cMouseDownInCluster = false;
+        if (!this.cDraggingMapByCluster) {
+            var markerClusterer_1 = this.cluster.getClusterer();
+            /**
+             * This event is fired when a cluster marker is clicked.
+             * @name MarkerClusterer#click
+             * @param {Cluster} c The cluster that was clicked.
+             * @event
+             */
+            google.maps.event.trigger(markerClusterer_1, 'click', this.cluster);
+            google.maps.event.trigger(markerClusterer_1, 'clusterclick', this.cluster); // deprecated name
+            // The default click handler follows. Disable it by setting
+            // the zoomOnClick property to false.
+            if (markerClusterer_1.getZoomOnClick()) {
+                // Zoom into the cluster.
+                var maxZoom_1 = markerClusterer_1.getMaxZoom();
+                var bounds_1 = this.cluster.getBounds();
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                markerClusterer_1.getMap().fitBounds(bounds_1);
+                // There is a fix for Issue 170 here:
+                this.timeOut = window.setTimeout(function () {
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    markerClusterer_1.getMap().fitBounds(bounds_1);
+                    // Don't zoom beyond the max zoom level
+                    if (maxZoom_1 !== null &&
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                        // @ts-ignore
+                        markerClusterer_1.getMap().getZoom() > maxZoom_1) {
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                        // @ts-ignore
+                        markerClusterer_1.getMap().setZoom(maxZoom_1 + 1);
+                    }
+                }, 100);
+            }
+            // Prevent event propagation to the map:
+            event.cancelBubble = true;
+            if (event.stopPropagation) {
+                event.stopPropagation();
+            }
+        }
+    };
+    ClusterIcon.prototype.onMouseOver = function () {
+        /**
+         * This event is fired when the mouse moves over a cluster marker.
+         * @name MarkerClusterer#mouseover
+         * @param {Cluster} c The cluster that the mouse moved over.
+         * @event
+         */
+        google.maps.event.trigger(this.cluster.getClusterer(), 'mouseover', this.cluster);
+    };
+    ClusterIcon.prototype.onMouseOut = function () {
+        /**
+         * This event is fired when the mouse moves out of a cluster marker.
+         * @name MarkerClusterer#mouseout
+         * @param {Cluster} c The cluster that the mouse moved out of.
+         * @event
+         */
+        google.maps.event.trigger(this.cluster.getClusterer(), 'mouseout', this.cluster);
+    };
     ClusterIcon.prototype.onAdd = function () {
-        var _this = this;
-        var cMouseDownInCluster;
-        var cDraggingMapByCluster;
         this.div = document.createElement('div');
         this.div.className = this.className;
         if (this.visible) {
             this.show();
         }
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         this.getPanes().overlayMouseTarget.appendChild(this.div);
         // Fix for Issue 157
         this.boundsChangedListener = google.maps.event.addListener(
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        this.getMap(), 'boundschanged', function boundsChanged() {
-            cDraggingMapByCluster = cMouseDownInCluster;
-        });
-        google.maps.event.addDomListener(this.div, 'mousedown', function onMouseDown() {
-            cMouseDownInCluster = true;
-            cDraggingMapByCluster = false;
-        });
-        google.maps.event.addDomListener(this.div, 'click', function (event) {
-            cMouseDownInCluster = false;
-            if (!cDraggingMapByCluster) {
-                var markerClusterer_1 = _this.cluster.getClusterer();
-                /**
-                 * This event is fired when a cluster marker is clicked.
-                 * @name MarkerClusterer#click
-                 * @param {Cluster} c The cluster that was clicked.
-                 * @event
-                 */
-                google.maps.event.trigger(markerClusterer_1, 'click', _this.cluster);
-                google.maps.event.trigger(markerClusterer_1, 'clusterclick', _this.cluster); // deprecated name
-                // The default click handler follows. Disable it by setting
-                // the zoomOnClick property to false.
-                if (markerClusterer_1.getZoomOnClick()) {
-                    // Zoom into the cluster.
-                    var maxZoom_1 = markerClusterer_1.getMaxZoom();
-                    var bounds_1 = _this.cluster.getBounds();
-                    // @ts-ignore
-                    markerClusterer_1.getMap().fitBounds(bounds_1);
-                    // There is a fix for Issue 170 here:
-                    setTimeout(function timeout() {
-                        // @ts-ignore
-                        markerClusterer_1.getMap().fitBounds(bounds_1);
-                        // Don't zoom beyond the max zoom level
-                        // @ts-ignore
-                        if (maxZoom_1 !== null && markerClusterer_1.getMap().getZoom() > maxZoom_1) {
-                            // @ts-ignore
-                            markerClusterer_1.getMap().setZoom(maxZoom_1 + 1);
-                        }
-                    }, 100);
-                }
-                // Prevent event propagation to the map:
-                event.cancelBubble = true;
-                if (event.stopPropagation) {
-                    event.stopPropagation();
-                }
-            }
-        });
-        google.maps.event.addDomListener(this.div, 'mouseover', function () {
-            /**
-             * This event is fired when the mouse moves over a cluster marker.
-             * @name MarkerClusterer#mouseover
-             * @param {Cluster} c The cluster that the mouse moved over.
-             * @event
-             */
-            google.maps.event.trigger(_this.cluster.getClusterer(), 'mouseover', _this.cluster);
-        });
-        google.maps.event.addDomListener(this.div, 'mouseout', function () {
-            /**
-             * This event is fired when the mouse moves out of a cluster marker.
-             * @name MarkerClusterer#mouseout
-             * @param {Cluster} c The cluster that the mouse moved out of.
-             * @event
-             */
-            google.maps.event.trigger(_this.cluster.getClusterer(), 'mouseout', _this.cluster);
-        });
+        this.getMap(), 'bounds_changed', this.onBoundsChanged);
+        this.div.addEventListener('mousedown', this.onMouseDown);
+        this.div.addEventListener('click', this.onClick);
+        this.div.addEventListener('mouseover', this.onMouseOver);
+        this.div.addEventListener('mouseout', this.onMouseOut);
     };
     ClusterIcon.prototype.onRemove = function () {
         if (this.div && this.div.parentNode) {
@@ -110,16 +155,23 @@ var ClusterIcon = /** @class */ (function () {
             if (this.boundsChangedListener !== null) {
                 google.maps.event.removeListener(this.boundsChangedListener);
             }
-            google.maps.event.clearInstanceListeners(this.div);
+            this.div.removeEventListener('mousedown', this.onMouseDown);
+            this.div.removeEventListener('click', this.onClick);
+            this.div.removeEventListener('mouseover', this.onMouseOver);
+            this.div.removeEventListener('mouseout', this.onMouseOut);
             this.div.parentNode.removeChild(this.div);
+            if (this.timeOut !== null) {
+                window.clearTimeout(this.timeOut);
+                this.timeOut = null;
+            }
             this.div = null;
         }
     };
     ClusterIcon.prototype.draw = function () {
         if (this.visible && this.div !== null && this.center) {
-            var _a = this.getPosFromLatLng(this.center), x = _a.x, y = _a.y;
-            this.div.style.top = y + 'px';
-            this.div.style.left = x + 'px';
+            var pos = this.getPosFromLatLng(this.center);
+            this.div.style.top = pos !== null ? "".concat(pos.y, "px") : '0';
+            this.div.style.left = pos !== null ? "".concat(pos.x, "px") : '0';
         }
     };
     ClusterIcon.prototype.hide = function () {
@@ -137,7 +189,9 @@ var ClusterIcon = /** @class */ (function () {
             var spriteH = parseInt(bp[0].replace(/^\s+|\s+$/g, ''), 10);
             var spriteV = parseInt(bp[1].replace(/^\s+|\s+$/g, ''), 10);
             var pos = this.getPosFromLatLng(this.center);
-            if (this.sums === null || typeof this.sums.title === 'undefined' || this.sums.title === '') {
+            if (this.sums === null ||
+                typeof this.sums.title === 'undefined' ||
+                this.sums.title === '') {
                 divTitle = this.cluster.getClusterer().getTitle();
             }
             else {
@@ -145,8 +199,8 @@ var ClusterIcon = /** @class */ (function () {
             }
             this.div.style.cursor = 'pointer';
             this.div.style.position = 'absolute';
-            this.div.style.top = "".concat(pos.y, "px");
-            this.div.style.left = "".concat(pos.x, "px");
+            this.div.style.top = pos !== null ? "".concat(pos.y, "px") : '0';
+            this.div.style.left = pos !== null ? "".concat(pos.x, "px") : '0';
             this.div.style.width = "".concat(this.width, "px");
             this.div.style.height = "".concat(this.height, "px");
             var img = document.createElement('img');
@@ -203,20 +257,20 @@ var ClusterIcon = /** @class */ (function () {
         this.center = center;
     };
     ClusterIcon.prototype.getPosFromLatLng = function (latlng) {
-        // @ts-ignore
         var pos = this.getProjection().fromLatLngToDivPixel(latlng);
-        pos.x -= this.anchorIcon[1];
-        pos.y -= this.anchorIcon[0];
-        // pos.x = pos.x
-        // pos.y = pos.y
+        if (pos !== null) {
+            pos.x -= this.anchorIcon[1];
+            pos.y -= this.anchorIcon[0];
+        }
         return pos;
     };
     return ClusterIcon;
-}());
+}(google.maps.OverlayView));
 var Cluster = /** @class */ (function () {
     function Cluster(markerClusterer) {
         this.markerClusterer = markerClusterer;
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         this.map = this.markerClusterer.getMap();
         this.gridSize = this.markerClusterer.getGridSize();
@@ -254,9 +308,11 @@ var Cluster = /** @class */ (function () {
         return bounds;
     };
     Cluster.prototype.remove = function () {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         this.clusterIcon.setMap(null);
         this.markers = [];
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         delete this.markers;
     };
@@ -344,11 +400,9 @@ var Cluster = /** @class */ (function () {
         if (this.markers.includes) {
             return this.markers.includes(marker);
         }
-        else {
-            for (var i = 0; i < this.markers.length; i++) {
-                if (marker === this.markers[i]) {
-                    return true;
-                }
+        for (var i = 0; i < this.markers.length; i++) {
+            if (marker === this.markers[i]) {
+                return true;
             }
         }
         return false;
@@ -356,7 +410,6 @@ var Cluster = /** @class */ (function () {
     return Cluster;
 }());
-/* global google */
 /**
  * Supports up to 9007199254740991 (Number.MAX_SAFE_INTEGER) markers
  * which is not a problem as max array length is 4294967296 (2**32)
@@ -377,85 +430,86 @@ var IMAGE_PATH = 'https://developers.google.com/maps/documentation/javascript/ex
 var IMAGE_EXTENSION = 'png';
 var IMAGE_SIZES = [53, 56, 66, 78, 90];
 var CLUSTERER_CLASS = 'cluster';
-var Clusterer = /** @class */ (function () {
+var Clusterer = /** @class */ (function (_super) {
+    __extends(Clusterer, _super);
     function Clusterer(map, optMarkers, optOptions) {
         if (optMarkers === void 0) { optMarkers = []; }
         if (optOptions === void 0) { optOptions = {}; }
-        this.extend(Clusterer, google.maps.OverlayView);
-        this.markers = [];
-        this.clusters = [];
-        this.listeners = [];
-        this.activeMap = null;
-        this.ready = false;
-        this.gridSize = optOptions.gridSize || 60;
-        this.minClusterSize = optOptions.minimumClusterSize || 2;
-        this.maxZoom = optOptions.maxZoom || null;
-        this.styles = optOptions.styles || [];
-        this.title = optOptions.title || '';
-        this.zoomOnClick = true;
+        var _this = _super.call(this) || this;
+        _this.extend(Clusterer, google.maps.OverlayView);
+        _this.markers = [];
+        _this.clusters = [];
+        _this.listeners = [];
+        _this.activeMap = null;
+        _this.ready = false;
+        _this.gridSize = optOptions.gridSize || 60;
+        _this.minClusterSize = optOptions.minimumClusterSize || 2;
+        _this.maxZoom = optOptions.maxZoom || null;
+        _this.styles = optOptions.styles || [];
+        _this.title = optOptions.title || '';
+        _this.zoomOnClick = true;
         if (optOptions.zoomOnClick !== undefined) {
-            this.zoomOnClick = optOptions.zoomOnClick;
+            _this.zoomOnClick = optOptions.zoomOnClick;
         }
-        this.averageCenter = false;
+        _this.averageCenter = false;
         if (optOptions.averageCenter !== undefined) {
-            this.averageCenter = optOptions.averageCenter;
+            _this.averageCenter = optOptions.averageCenter;
         }
-        this.ignoreHidden = false;
+        _this.ignoreHidden = false;
         if (optOptions.ignoreHidden !== undefined) {
-            this.ignoreHidden = optOptions.ignoreHidden;
+            _this.ignoreHidden = optOptions.ignoreHidden;
         }
-        this.enableRetinaIcons = false;
+        _this.enableRetinaIcons = false;
         if (optOptions.enableRetinaIcons !== undefined) {
-            this.enableRetinaIcons = optOptions.enableRetinaIcons;
-        }
-        this.imagePath = optOptions.imagePath || IMAGE_PATH;
-        this.imageExtension = optOptions.imageExtension || IMAGE_EXTENSION;
-        this.imageSizes = optOptions.imageSizes || IMAGE_SIZES;
-        this.calculator = optOptions.calculator || CALCULATOR;
-        this.batchSize = optOptions.batchSize || BATCH_SIZE;
-        this.batchSizeIE = optOptions.batchSizeIE || BATCH_SIZE_IE;
-        this.clusterClass = optOptions.clusterClass || CLUSTERER_CLASS;
+            _this.enableRetinaIcons = optOptions.enableRetinaIcons;
+        }
+        _this.imagePath = optOptions.imagePath || IMAGE_PATH;
+        _this.imageExtension = optOptions.imageExtension || IMAGE_EXTENSION;
+        _this.imageSizes = optOptions.imageSizes || IMAGE_SIZES;
+        _this.calculator = optOptions.calculator || CALCULATOR;
+        _this.batchSize = optOptions.batchSize || BATCH_SIZE;
+        _this.batchSizeIE = optOptions.batchSizeIE || BATCH_SIZE_IE;
+        _this.clusterClass = optOptions.clusterClass || CLUSTERER_CLASS;
         if (navigator.userAgent.toLowerCase().indexOf('msie') !== -1) {
             // Try to avoid IE timeout when processing a huge number of markers:
-            this.batchSize = this.batchSizeIE;
+            _this.batchSize = _this.batchSizeIE;
         }
-        this.timerRefStatic = null;
-        this.setupStyles();
-        this.addMarkers(optMarkers, true);
+        _this.timerRefStatic = null;
+        _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.setMap(map); // Note: this causes onAdd to be called
+        return _this;
     }
+    Clusterer.prototype.onZoomChanged = function () {
+        var _a, _b;
+        this.resetViewport(false);
+        // Workaround for this Google bug: when map is at level 0 and "-" of
+        // zoom slider is clicked, a "zoom_changed" event is fired even though
+        // the map doesn't zoom out any further. In this situation, no "idle"
+        // event is triggered so the cluster markers that have been removed
+        // do not get redrawn. Same goes for a zoom in at maxZoom.
+        if (((_a = this.getMap()) === null || _a === void 0 ? void 0 : _a.getZoom()) === (this.get('minZoom') || 0) ||
+            ((_b = this.getMap()) === null || _b === void 0 ? void 0 : _b.getZoom()) === this.get('maxZoom')) {
+            google.maps.event.trigger(this, 'idle');
+        }
+    };
+    Clusterer.prototype.onIdle = function () {
+        this.redraw();
+    };
     Clusterer.prototype.onAdd = function () {
-        var _this = this;
-        // @ts-ignore
-        this.activeMap = this.getMap();
+        var map = this.getMap();
+        this.activeMap = map;
         this.ready = true;
         this.repaint();
-        // Add the map event listeners
-        this.listeners = [
-            google.maps.event.addListener(
-            // @ts-ignore
-            this.getMap(), 'zoom_changed', function () {
-                _this.resetViewport(false);
-                // Workaround for this Google bug: when map is at level 0 and "-" of
-                // zoom slider is clicked, a "zoom_changed" event is fired even though
-                // the map doesn't zoom out any further. In this situation, no "idle"
-                // event is triggered so the cluster markers that have been removed
-                // do not get redrawn. Same goes for a zoom in at maxZoom.
-                if (
-                // @ts-ignore
-                _this.getMap().getZoom() === (_this.get('minZoom') || 0) ||
-                    // @ts-ignore
-                    _this.getMap().getZoom() === _this.get('maxZoom')) {
-                    google.maps.event.trigger(_this, 'idle');
-                }
-            }),
-            google.maps.event.addListener(
-            // @ts-ignore
-            this.getMap(), 'idle', function () {
-                _this.redraw();
-            }),
-        ];
+        if (map !== null) {
+            // Add the map event listeners
+            this.listeners = [
+                google.maps.event.addListener(map, 'zoom_changed', this.onZoomChanged),
+                google.maps.event.addListener(map, 'idle', this.onIdle),
+            ];
+        }
     };
     Clusterer.prototype.onRemove = function () {
         // Put all the managed markers back on the map:
@@ -500,6 +554,7 @@ var Clusterer = /** @class */ (function () {
                 bounds.extend(position);
             }
         }
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         this.getMap().fitBounds(bounds);
     };
@@ -691,26 +746,39 @@ var Clusterer = /** @class */ (function () {
         }, 0);
     };
     Clusterer.prototype.getExtendedBounds = function (bounds) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         var projection = this.getProjection();
         // Convert the points to pixels and the extend out by the grid size.
         var trPix = projection.fromLatLngToDivPixel(
         // Turn the bounds into latlng.
         new google.maps.LatLng(bounds.getNorthEast().lat(), bounds.getNorthEast().lng()));
-        trPix.x += this.gridSize;
-        trPix.y -= this.gridSize;
+        if (trPix !== null) {
+            trPix.x += this.gridSize;
+            trPix.y -= this.gridSize;
+        }
         var blPix = projection.fromLatLngToDivPixel(
         // Turn the bounds into latlng.
         new google.maps.LatLng(bounds.getSouthWest().lat(), bounds.getSouthWest().lng()));
-        blPix.x -= this.gridSize;
-        blPix.y += this.gridSize;
+        if (blPix !== null) {
+            blPix.x -= this.gridSize;
+            blPix.y += this.gridSize;
+        }
         // Extend the bounds to contain the new bounds.
-        bounds.extend(
-        // Convert the pixel points back to LatLng nw
-        projection.fromDivPixelToLatLng(trPix));
-        bounds.extend(
-        // Convert the pixel points back to LatLng sw
-        projection.fromDivPixelToLatLng(blPix));
+        if (trPix !== null) {
+            // Convert the pixel points back to LatLng nw
+            var point1 = projection.fromDivPixelToLatLng(trPix);
+            if (point1 !== null) {
+                bounds.extend(point1);
+            }
+        }
+        if (blPix !== null) {
+            // Convert the pixel points back to LatLng sw
+            var point2 = projection.fromDivPixelToLatLng(blPix);
+            if (point2 !== null) {
+                bounds.extend(point2);
+            }
+        }
         return bounds;
     };
     Clusterer.prototype.redraw = function () {
@@ -792,35 +860,29 @@ var Clusterer = /** @class */ (function () {
             google.maps.event.trigger(this, 'clusteringbegin', this);
             if (this.timerRefStatic !== null) {
                 window.clearTimeout(this.timerRefStatic);
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
                 delete this.timerRefStatic;
             }
         }
+        var map = this.getMap();
+        var bounds = map !== null && 'getBounds' in map ? map.getBounds() : null;
         // 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:
         var mapBounds =
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        this.getMap().getZoom() > 3
-            ? new google.maps.LatLngBounds(
-            // @ts-ignore
-            this.getMap()
-                .getBounds()
-                .getSouthWest(),
-            // @ts-ignore
-            this.getMap()
-                .getBounds()
-                .getNorthEast())
+        map.getZoom() > 3
+            ? new google.maps.LatLngBounds(bounds === null || bounds === void 0 ? void 0 : bounds.getSouthWest(), bounds === null || bounds === void 0 ? void 0 : bounds.getNorthEast())
             : new google.maps.LatLngBounds(new google.maps.LatLng(85.02070771743472, -178.48388434375), new google.maps.LatLng(-85.08136444384544, 178.00048865625));
-        var bounds = this.getExtendedBounds(mapBounds);
+        var extendedMapBounds = this.getExtendedBounds(mapBounds);
         var iLast = Math.min(iFirst + this.batchSize, this.markers.length);
         for (var i = iFirst; i < iLast; i++) {
             var marker = this.markers[i];
-            if (!marker.isAdded && this.isMarkerInBounds(marker, bounds)) {
-                if (!this.ignoreHidden || (this.ignoreHidden && marker.getVisible())) {
-                    this.addToClosestCluster(marker);
-                }
+            if (!marker.isAdded && this.isMarkerInBounds(marker, extendedMapBounds) && (!this.ignoreHidden || (this.ignoreHidden && marker.getVisible()))) {
+                this.addToClosestCluster(marker);
             }
         }
         if (iLast < this.markers.length) {
@@ -845,17 +907,14 @@ var Clusterer = /** @class */ (function () {
     };
     Clusterer.prototype.extend = function (obj1, obj2) {
         return function applyExtend(object) {
-            // eslint-disable-next-line guard-for-in
             for (var property in object.prototype) {
-                // @ts-ignore
-                this.prototype[property] = object.prototype[property];
+                this.prototype.set(property, object.prototype.get(property));
             }
-            // @ts-ignore
             return this;
         }.apply(obj1, [obj2]);
     };
     return Clusterer;
-}());
+}(google.maps.OverlayView));
 export { Cluster, ClusterIcon, Clusterer };
 //# sourceMappingURL=esm.js.map