MarkerClusterer with AdvancedMarkers

[jukkahuuskonen]

Hi,

Anyone got a working implementation of the MarkerClusterer with AdvancedMarkers. Looking at you @Fabioni :)

[Fabioni]

Hi,

Anyone got a working implementation of the MarkerClusterer with AdvancedMarkers. Looking at you @Fabioni :)

I never worked with MarkerCluster, but would also be interested to see how it works.

[jukkahuuskonen]

I got the MarkerClusterer to work in our project with AdvancedMarkers. Downside is that this Clusterer doesn't work with old markers. Basically I just copied the MarkerClusterer, Clusterer, Cluster and ClusterIcon files from this project and fixed the things that had changed with AdvancedMarkers. I did some other small changes that I believe reduce rendering in some cases. Anyways, to get this to work, you need to just add these components to your own project (just like with @Fabioni 's AdvancedMarker) and fix the import paths to match your directory structure.
Our project doesn't work with typescript, so I removed it and these files are just regular JSX/JS-files. Please be free to make a PR based on these files if you want and have enough free time. These files are provided as is with no guaranties of them working in your project. I hope they'll are of assitance.
Here are the files:
MarkerClusterer.jsx

/* global google */
import { useState, memo, useContext, useEffect, useRef } from 'react';
import { MapContext } from '@react-google-maps/api';
import { Clusterer } from './Clusterer';

const eventMap = {
  onClick: 'click',
  onClusteringBegin: 'clusteringbegin',
  onClusteringEnd: 'clusteringend',
  onMouseOut: 'mouseout',
  onMouseOver: 'mouseover',
};

const updaterMap = {
  averageCenter(instance, averageCenter) {
    instance.setAverageCenter(averageCenter);
  },

  batchSizeIE(instance, batchSizeIE) {
    instance.setBatchSizeIE(batchSizeIE);
  },

  calculator(instance, calculator) {
    instance.setCalculator(calculator);
  },

  clusterClass(instance, clusterClass) {
    instance.setClusterClass(clusterClass);
  },

  enableRetinaIcons(instance, enableRetinaIcons) {
    instance.setEnableRetinaIcons(enableRetinaIcons);
  },

  gridSize(instance, gridSize) {
    instance.setGridSize(gridSize);
  },

  ignoreHidden(instance, ignoreHidden) {
    instance.setIgnoreHidden(ignoreHidden);
  },

  imageExtension(instance, imageExtension) {
    instance.setImageExtension(imageExtension);
  },

  imagePath(instance, imagePath) {
    instance.setImagePath(imagePath);
  },

  imageSizes(instance, imageSizes) {
    instance.setImageSizes(imageSizes);
  },

  maxZoom(instance, maxZoom) {
    instance.setMaxZoom(maxZoom);
  },

  minimumClusterSize(instance, minimumClusterSize) {
    instance.setMinimumClusterSize(minimumClusterSize);
  },

  styles(instance, styles) {
    instance.setStyles(styles);
  },

  title(instance, title) {
    instance.setTitle(title);
  },

  zoomOnClick(instance, zoomOnClick) {
    instance.setZoomOnClick(zoomOnClick);
  },
};

const defaultOptions = {};

function MarkerClustererFunctional(props) {
  const {
    children,
    options,
    averageCenter,
    batchSizeIE,
    calculator,
    clusterClass,
    enableRetinaIcons,
    gridSize,
    ignoreHidden,
    imageExtension,
    imagePath,
    imageSizes,
    maxZoom,
    minimumClusterSize,
    styles,
    title,
    zoomOnClick,
    onClick,
    onClusteringBegin,
    onClusteringEnd,
    onMouseOver,
    onMouseOut,
    onLoad,
    onUnmount,
  } = props;
  const [instance, setInstance] = useState(null);
  const instanceRef = useRef(instance);
  instanceRef.current = instance;
  const map = useContext(MapContext);

  const [clickListener, setClickListener] = useState(null);
  const [clusteringBeginListener, setClusteringBeginListener] = useState(null);
  const [clusteringEndListener, setClusteringEndListener] = useState(null);
  const [mouseoutListener, setMouseoutListener] = useState(null);
  const [mouseoverListener, setMouseoverListener] = useState(null);

  const clickListenerRef = useRef(clickListener);
  const clusteringBeginListenerRef = useRef(clusteringBeginListener);
  const clusteringEndListenerRef = useRef(clusteringEndListener);
  const mouseoutListenerRef = useRef(mouseoutListener);
  const mouseoverListenerRef = useRef(mouseoverListener);

  clickListenerRef.current = clickListener;
  clusteringBeginListenerRef.current = clusteringBeginListener;
  clusteringEndListenerRef.current = clusteringEndListener;
  mouseoutListenerRef.current = mouseoutListener;
  mouseoverListenerRef.current = mouseoverListener;

  useEffect(() => {
    if (instanceRef.current && onMouseOut) {
      if (mouseoutListenerRef.current !== null) {
        google.maps.event.removeListener(mouseoutListenerRef.current);
      }

      setMouseoutListener(
        google.maps.event.addListener(instanceRef.current, eventMap.onMouseOut, onMouseOut)
      );
    }
  }, [onMouseOut]);

  useEffect(() => {
    if (instanceRef.current && onMouseOver) {
      if (mouseoverListenerRef.current !== null) {
        google.maps.event.removeListener(mouseoverListenerRef.current);
      }

      setMouseoverListener(
        google.maps.event.addListener(instanceRef.current, eventMap.onMouseOver, onMouseOver)
      );
    }
  }, [onMouseOver]);

  useEffect(() => {
    if (instanceRef.current && onClick) {
      if (clickListenerRef.current !== null) {
        google.maps.event.removeListener(clickListenerRef.current);
      }

      setClickListener(
        google.maps.event.addListener(instanceRef.current, eventMap.onClick, onClick)
      );
    }
  }, [onClick]);

  useEffect(() => {
    if (instanceRef.current && onClusteringBegin) {
      if (clusteringBeginListenerRef.current !== null) {
        google.maps.event.removeListener(clusteringBeginListenerRef.current);
      }
      setClusteringBeginListener(
        google.maps.event.addListener(
          instanceRef.current,
          eventMap.onClusteringBegin,
          onClusteringBegin
        )
      );
    }
  }, [onClusteringBegin]);

  useEffect(() => {
    if (instanceRef.current && onClusteringEnd) {
      if (clusteringEndListenerRef.current !== null) {
        google.maps.event.removeListener(clusteringEndListenerRef.current);
      }

      setClusteringEndListener(
        google.maps.event.addListener(
          instanceRef.current,
          eventMap.onClusteringEnd,
          onClusteringEnd
        )
      );
    }
  }, [onClusteringEnd]);

  useEffect(() => {
    if (typeof averageCenter !== 'undefined' && instanceRef.current !== null) {
      updaterMap.averageCenter(instanceRef.current, averageCenter);
    }
  }, [averageCenter]);

  useEffect(() => {
    if (typeof batchSizeIE !== 'undefined' && instanceRef.current !== null) {
      updaterMap.batchSizeIE(instanceRef.current, batchSizeIE);
    }
  }, [batchSizeIE]);

  useEffect(() => {
    if (typeof calculator !== 'undefined' && instanceRef.current !== null) {
      updaterMap.calculator(instanceRef.current, calculator);
    }
  }, [calculator]);

  useEffect(() => {
    if (typeof clusterClass !== 'undefined' && instanceRef.current !== null) {
      updaterMap.clusterClass(instanceRef.current, clusterClass);
    }
  }, [clusterClass]);

  useEffect(() => {
    if (typeof enableRetinaIcons !== 'undefined' && instanceRef.current !== null) {
      updaterMap.enableRetinaIcons(instanceRef.current, enableRetinaIcons);
    }
  }, [enableRetinaIcons]);

  useEffect(() => {
    if (typeof gridSize !== 'undefined' && instanceRef.current !== null) {
      updaterMap.gridSize(instanceRef.current, gridSize);
    }
  }, [gridSize]);

  useEffect(() => {
    if (typeof ignoreHidden !== 'undefined' && instanceRef.current !== null) {
      updaterMap.ignoreHidden(instanceRef.current, ignoreHidden);
    }
  }, [ignoreHidden]);

  useEffect(() => {
    if (typeof imageExtension !== 'undefined' && instanceRef.current !== null) {
      updaterMap.imageExtension(instanceRef.current, imageExtension);
    }
  }, [imageExtension]);

  useEffect(() => {
    if (typeof imagePath !== 'undefined' && instanceRef.current !== null) {
      updaterMap.imagePath(instanceRef.current, imagePath);
    }
  }, [imagePath]);

  useEffect(() => {
    if (typeof imageSizes !== 'undefined' && instanceRef.current !== null) {
      updaterMap.imageSizes(instanceRef.current, imageSizes);
    }
  }, [imageSizes]);

  useEffect(() => {
    if (typeof maxZoom !== 'undefined' && instanceRef.current !== null) {
      updaterMap.maxZoom(instanceRef.current, maxZoom);
    }
  }, [maxZoom]);

  useEffect(() => {
    if (typeof minimumClusterSize !== 'undefined' && instanceRef.current !== null) {
      updaterMap.minimumClusterSize(instanceRef.current, minimumClusterSize);
    }
  }, [minimumClusterSize]);

  useEffect(() => {
    if (typeof styles !== 'undefined' && instanceRef.current !== null) {
      updaterMap.styles(instanceRef.current, styles);
    }
  }, [styles]);

  useEffect(() => {
    if (typeof title !== 'undefined' && instanceRef.current !== null) {
      updaterMap.title(instanceRef.current, title);
    }
  }, [title]);

  useEffect(() => {
    if (typeof zoomOnClick !== 'undefined' && instanceRef.current !== null) {
      updaterMap.zoomOnClick(instanceRef.current, zoomOnClick);
    }
  }, [zoomOnClick]);

  useEffect(() => {
    if (!map) return;

    const clustererOptions = {
      ...(options || defaultOptions),
    };

    const clusterer = instanceRef.current || new Clusterer(map, [], clustererOptions);

    if (averageCenter) {
      updaterMap.averageCenter(clusterer, averageCenter);
    }

    if (batchSizeIE) {
      updaterMap.batchSizeIE(clusterer, batchSizeIE);
    }

    if (calculator) {
      updaterMap.calculator(clusterer, calculator);
    }

    if (clusterClass) {
      updaterMap.clusterClass(clusterer, clusterClass);
    }

    if (enableRetinaIcons) {
      updaterMap.enableRetinaIcons(clusterer, enableRetinaIcons);
    }

    if (gridSize) {
      updaterMap.gridSize(clusterer, gridSize);
    }

    if (ignoreHidden) {
      updaterMap.ignoreHidden(clusterer, ignoreHidden);
    }

    if (imageExtension) {
      updaterMap.imageExtension(clusterer, imageExtension);
    }

    if (imagePath) {
      updaterMap.imagePath(clusterer, imagePath);
    }

    if (imageSizes) {
      updaterMap.imageSizes(clusterer, imageSizes);
    }

    if (maxZoom) {
      updaterMap.maxZoom(clusterer, maxZoom);
    }

    if (minimumClusterSize) {
      updaterMap.minimumClusterSize(clusterer, minimumClusterSize);
    }

    if (styles) {
      updaterMap.styles(clusterer, styles);
    }

    if (title) {
      updaterMap.title(clusterer, title);
    }

    if (zoomOnClick) {
      updaterMap.zoomOnClick(clusterer, zoomOnClick);
    }

    if (onMouseOut) {
      setMouseoutListener(
        google.maps.event.addListener(clusterer, eventMap.onMouseOut, onMouseOut)
      );
    }

    if (onMouseOver) {
      setMouseoverListener(
        google.maps.event.addListener(clusterer, eventMap.onMouseOver, onMouseOver)
      );
    }

    if (onClick) {
      setClickListener(google.maps.event.addListener(clusterer, eventMap.onClick, onClick));
    }

    if (onClusteringBegin) {
      setClusteringBeginListener(
        google.maps.event.addListener(clusterer, eventMap.onClusteringBegin, onClusteringBegin)
      );
    }

    if (onClusteringEnd) {
      setClusteringEndListener(
        google.maps.event.addListener(clusterer, eventMap.onClusteringEnd, onClusteringEnd)
      );
    }

    setInstance(clusterer);

    if (onLoad) {
      onLoad(clusterer);
    }

    return () => {
      if (mouseoutListener !== null) {
        google.maps.event.removeListener(mouseoutListener);
      }

      if (mouseoverListener !== null) {
        google.maps.event.removeListener(mouseoverListener);
      }

      if (clickListener !== null) {
        google.maps.event.removeListener(clickListener);
      }

      if (clusteringBeginListenerRef.current !== null) {
        google.maps.event.removeListener(clusteringBeginListenerRef.current);
      }

      if (clusteringEndListenerRef.current !== null) {
        google.maps.event.removeListener(clusteringEndListenerRef.current);
      }

      if (onUnmount) {
        onUnmount(clusterer);
      }
    };
  }, [
    averageCenter,
    batchSizeIE,
    calculator,
    clickListener,
    clusterClass,
    enableRetinaIcons,
    gridSize,
    ignoreHidden,
    imageExtension,
    imagePath,
    imageSizes,
    map,
    maxZoom,
    minimumClusterSize,
    mouseoutListener,
    mouseoverListener,
    onClick,
    onClusteringBegin,
    onClusteringEnd,
    onLoad,
    onMouseOut,
    onMouseOver,
    onUnmount,
    options,
    styles,
    title,
    zoomOnClick,
  ]);

  return instance !== null ? children(instance) || null : null;
}

const MarkerClustererF = memo(MarkerClustererFunctional);

export default MarkerClustererF;

Clusterer.jsx

/* eslint-disable no-restricted-syntax */
/* global google */
import { Cluster } from './Cluster';

/**
 * Supports up to 9007199254740991 (Number.MAX_SAFE_INTEGER) markers
 * which is not a problem as max array length is 4294967296 (2**32)
 */
function CALCULATOR(markers, numStyles) {
  const count = markers.length;

  const numberOfDigits = count.toString().length;

  const index = Math.min(numberOfDigits, numStyles);

  return {
    text: count.toString(),
    index,
    title: '',
  };
}

const BATCH_SIZE = 2000;

const BATCH_SIZE_IE = 500;

const IMAGE_PATH =
  'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m';

const IMAGE_EXTENSION = 'png';

const IMAGE_SIZES = [53, 56, 66, 78, 90];

const CLUSTERER_CLASS = 'cluster';

export class Clusterer {
  markers;

  clusters;

  listeners;

  activeMap;

  ready;

  gridSize;

  minClusterSize;

  maxZoom;

  styles;

  title;

  zoomOnClick;

  averageCenter;

  ignoreHidden;

  enableRetinaIcons;

  imagePath;

  imageExtension;

  imageSizes;

  calculator;

  batchSize;

  batchSizeIE;

  clusterClass;

  timerRefStatic;

  constructor(map, optMarkers = [], optOptions = {}) {
    this.getMinimumClusterSize = this.getMinimumClusterSize.bind(this);
    this.setMinimumClusterSize = this.setMinimumClusterSize.bind(this);
    this.getEnableRetinaIcons = this.getEnableRetinaIcons.bind(this);
    this.setEnableRetinaIcons = this.setEnableRetinaIcons.bind(this);
    this.addToClosestCluster = this.addToClosestCluster.bind(this);
    this.getImageExtension = this.getImageExtension.bind(this);
    this.setImageExtension = this.setImageExtension.bind(this);
    this.getExtendedBounds = this.getExtendedBounds.bind(this);
    this.getAverageCenter = this.getAverageCenter.bind(this);
    this.setAverageCenter = this.setAverageCenter.bind(this);
    this.getTotalClusters = this.getTotalClusters.bind(this);
    this.fitMapToMarkers = this.fitMapToMarkers.bind(this);
    this.getIgnoreHidden = this.getIgnoreHidden.bind(this);
    this.setIgnoreHidden = this.setIgnoreHidden.bind(this);
    this.getClusterClass = this.getClusterClass.bind(this);
    this.setClusterClass = this.setClusterClass.bind(this);
    this.getTotalMarkers = this.getTotalMarkers.bind(this);
    this.getZoomOnClick = this.getZoomOnClick.bind(this);
    this.setZoomOnClick = this.setZoomOnClick.bind(this);
    this.getBatchSizeIE = this.getBatchSizeIE.bind(this);
    this.setBatchSizeIE = this.setBatchSizeIE.bind(this);
    this.createClusters = this.createClusters.bind(this);
    this.onZoomChanged = this.onZoomChanged.bind(this);
    this.getImageSizes = this.getImageSizes.bind(this);
    this.setImageSizes = this.setImageSizes.bind(this);
    this.getCalculator = this.getCalculator.bind(this);
    this.setCalculator = this.setCalculator.bind(this);
    this.removeMarkers = this.removeMarkers.bind(this);
    this.resetViewport = this.resetViewport.bind(this);
    this.getImagePath = this.getImagePath.bind(this);
    this.setImagePath = this.setImagePath.bind(this);
    this.pushMarkerTo = this.pushMarkerTo.bind(this);
    this.removeMarker = this.removeMarker.bind(this);
    this.clearMarkers = this.clearMarkers.bind(this);
    this.setupStyles = this.setupStyles.bind(this);
    this.getGridSize = this.getGridSize.bind(this);
    this.setGridSize = this.setGridSize.bind(this);
    this.getClusters = this.getClusters.bind(this);
    this.getMaxZoom = this.getMaxZoom.bind(this);
    this.setMaxZoom = this.setMaxZoom.bind(this);
    this.getMarkers = this.getMarkers.bind(this);
    this.addMarkers = this.addMarkers.bind(this);
    this.getStyles = this.getStyles.bind(this);
    this.setStyles = this.setStyles.bind(this);
    this.addMarker = this.addMarker.bind(this);
    this.onRemove = this.onRemove.bind(this);
    this.getTitle = this.getTitle.bind(this);
    this.setTitle = this.setTitle.bind(this);
    this.repaint = this.repaint.bind(this);
    this.onIdle = this.onIdle.bind(this);
    this.redraw = this.redraw.bind(this);
    this.onAdd = this.onAdd.bind(this);
    this.draw = this.draw.bind(this);

    this.extend = this.extend.bind(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.averageCenter = false;

    if (optOptions.averageCenter !== undefined) {
      this.averageCenter = optOptions.averageCenter;
    }

    this.ignoreHidden = false;

    if (optOptions.ignoreHidden !== undefined) {
      this.ignoreHidden = optOptions.ignoreHidden;
    }

    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;

    if (navigator.userAgent.toLowerCase().indexOf('msie') !== -1) {
      // Try to avoid IE timeout when processing a huge number of markers:
      this.batchSize = this.batchSizeIE;
    }

    this.timerRefStatic = null;

    this.setupStyles();

    this.addMarkers(optMarkers, true);

    this.setMap(map); // Note: this causes onAdd to be called
  }

  onZoomChanged() {
    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 (
      this.map?.getZoom() === (this.get('minZoom') || 0) ||
      this.map?.getZoom() === this.get('maxZoom')
    ) {
      google.maps.event.trigger(this, 'idle');
    }
  }

  onIdle() {
    this.redraw();
  }

  onAdd() {
    const { map } = this;

    this.activeMap = map;

    this.ready = true;

    this.repaint();

    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),
      ];
    }
  }

  onRemove() {
    // Put all the managed markers back on the map:
    for (const marker of this.markers) {
      if (marker.map !== this.activeMap) {
        marker.map = this.activeMap;
      }
    }

    // Remove all clusters:
    for (const cluster of this.clusters) {
      cluster.remove();
    }

    this.clusters = [];

    // Remove map event listeners:
    for (const listener of this.listeners) {
      google.maps.event.removeListener(listener);
    }

    this.listeners = [];

    this.activeMap = null;

    this.ready = false;
  }

  draw() {}

  getMap() {
    return null;
  }

  getPanes() {
    return null;
  }

  getProjection() {
    return {
      fromContainerPixelToLatLng() {
        return null;
      },
      fromDivPixelToLatLng() {
        return null;
      },
      fromLatLngToContainerPixel() {
        return null;
      },
      fromLatLngToDivPixel() {
        return null;
      },
      getVisibleRegion() {
        return null;
      },
      getWorldWidth() {
        return 0;
      },
    };
  }

  setMap() {}

  addListener() {
    return {
      remove() {},
    };
  }

  bindTo() {}

  get() {}

  notify() {}

  set() {}

  setValues() {}

  unbind() {}

  unbindAll() {}

  setupStyles() {
    if (this.styles.length > 0) {
      return;
    }

    for (let i = 0; i < this.imageSizes.length; i++) {
      this.styles.push({
        url: `${this.imagePath + (i + 1)}.${this.imageExtension}`,
        height: this.imageSizes[i] || 0,
        width: this.imageSizes[i] || 0,
      });
    }
  }

  fitMapToMarkers() {
    const markers = this.getMarkers();

    const bounds = new google.maps.LatLngBounds();

    for (const marker of markers) {
      const { position } = marker;

      if (position) {
        bounds.extend(position);
      }
    }

    const { map } = this;

    if (map !== null && 'fitBounds' in map) {
      map.fitBounds(bounds);
    }
  }

  getGridSize() {
    return this.gridSize;
  }

  setGridSize(gridSize) {
    this.gridSize = gridSize;
  }

  getMinimumClusterSize() {
    return this.minClusterSize;
  }

  setMinimumClusterSize(minimumClusterSize) {
    this.minClusterSize = minimumClusterSize;
  }

  getMaxZoom() {
    return this.maxZoom;
  }

  setMaxZoom(maxZoom) {
    this.maxZoom = maxZoom;
  }

  getStyles() {
    return this.styles;
  }

  setStyles(styles) {
    this.styles = styles;
  }

  getTitle() {
    return this.title;
  }

  setTitle(title) {
    this.title = title;
  }

  getZoomOnClick() {
    return this.zoomOnClick;
  }

  setZoomOnClick(zoomOnClick) {
    this.zoomOnClick = zoomOnClick;
  }

  getAverageCenter() {
    return this.averageCenter;
  }

  setAverageCenter(averageCenter) {
    this.averageCenter = averageCenter;
  }

  getIgnoreHidden() {
    return this.ignoreHidden;
  }

  setIgnoreHidden(ignoreHidden) {
    this.ignoreHidden = ignoreHidden;
  }

  getEnableRetinaIcons() {
    return this.enableRetinaIcons;
  }

  setEnableRetinaIcons(enableRetinaIcons) {
    this.enableRetinaIcons = enableRetinaIcons;
  }

  getImageExtension() {
    return this.imageExtension;
  }

  setImageExtension(imageExtension) {
    this.imageExtension = imageExtension;
  }

  getImagePath() {
    return this.imagePath;
  }

  setImagePath(imagePath) {
    this.imagePath = imagePath;
  }

  getImageSizes() {
    return this.imageSizes;
  }

  setImageSizes(imageSizes) {
    this.imageSizes = imageSizes;
  }

  getCalculator() {
    return this.calculator;
  }

  setCalculator(calculator) {
    this.calculator = calculator;
  }

  getBatchSizeIE() {
    return this.batchSizeIE;
  }

  setBatchSizeIE(batchSizeIE) {
    this.batchSizeIE = batchSizeIE;
  }

  getClusterClass() {
    return this.clusterClass;
  }

  setClusterClass(clusterClass) {
    this.clusterClass = clusterClass;
  }

  getMarkers() {
    return this.markers;
  }

  getTotalMarkers() {
    return this.markers.length;
  }

  getClusters() {
    return this.clusters;
  }

  getTotalClusters() {
    return this.clusters.length;
  }

  addMarker(marker, optNoDraw) {
    this.pushMarkerTo(marker);

    if (!optNoDraw) {
      this.redraw();
    }
  }

  addMarkers(markers, optNoDraw) {
    for (const key in markers) {
      if (Object.prototype.hasOwnProperty.call(markers, key)) {
        const marker = markers[key];

        if (marker) {
          this.pushMarkerTo(marker);
        }
      }
    }

    if (!optNoDraw) {
      this.redraw();
    }
  }

  pushMarkerTo(marker) {
    // If the marker is draggable add a listener so we can update the clusters on the dragend:
    if (marker.gmpDraggable) {
      google.maps.event.addListener(marker, 'dragend', () => {
        if (this.ready) {
          marker.isAdded = false;

          this.repaint();
        }
      });
    }

    marker.isAdded = false;

    this.markers.push(marker);
  }

  removeMarker_(marker) {
    let index = -1;

    if (this.markers.indexOf) {
      index = this.markers.indexOf(marker);
    } else {
      for (let i = 0; i < this.markers.length; i++) {
        if (marker === this.markers[i]) {
          index = i;

          break;
        }
      }
    }

    if (index === -1) {
      // Marker is not in our list of markers, so do nothing:
      return false;
    }

    marker.map = null;

    this.markers.splice(index, 1); // Remove the marker from the list of managed markers

    return true;
  }

  removeMarker(marker, optNoDraw) {
    const removed = this.removeMarker_(marker);

    if (!optNoDraw && removed) {
      this.repaint();
    }

    return removed;
  }

  removeMarkers(markers, optNoDraw) {
    let removed = false;

    for (const marker of markers) {
      removed = removed || this.removeMarker_(marker);
    }

    if (!optNoDraw && removed) {
      this.repaint();
    }

    return removed;
  }

  clearMarkers() {
    this.resetViewport(true);

    this.markers = [];
  }

  repaint() {
    const oldClusters = this.clusters.slice();

    this.clusters = [];

    this.resetViewport(false);

    this.redraw();

    // Remove the old clusters.
    // Do it in a timeout to prevent blinking effect.
    setTimeout(() => {
      for (const oldCluster of oldClusters) {
        oldCluster.remove();
      }
    }, 0);
  }

  getExtendedBounds(bounds) {
    const projection = this.getProjection();

    // Convert the points to pixels and the extend out by the grid size.
    const trPix = projection.fromLatLngToDivPixel(
      // Turn the bounds into latlng.
      new google.maps.LatLng(bounds.getNorthEast().lat(), bounds.getNorthEast().lng())
    );

    if (trPix !== null) {
      trPix.x += this.gridSize;
      trPix.y -= this.gridSize;
    }

    const blPix = projection.fromLatLngToDivPixel(
      // Turn the bounds into latlng.
      new google.maps.LatLng(bounds.getSouthWest().lat(), bounds.getSouthWest().lng())
    );

    if (blPix !== null) {
      blPix.x -= this.gridSize;
      blPix.y += this.gridSize;
    }

    // Extend the bounds to contain the new bounds.
    if (trPix !== null) {
      // Convert the pixel points back to LatLng nw
      const point1 = projection.fromDivPixelToLatLng(trPix);

      if (point1 !== null) {
        bounds.extend(point1);
      }
    }

    if (blPix !== null) {
      // Convert the pixel points back to LatLng sw
      const point2 = projection.fromDivPixelToLatLng(blPix);

      if (point2 !== null) {
        bounds.extend(point2);
      }
    }

    return bounds;
  }

  redraw() {
    // Redraws all the clusters.
    this.createClusters(0);
  }

  resetViewport(optHide) {
    // Remove all the clusters
    for (const cluster of this.clusters) {
      cluster.remove();
    }

    this.clusters = [];

    // Reset the markers to not be added and to be removed from the map.
    for (const marker of this.markers) {
      marker.isAdded = false;

      if (optHide) {
        marker.map = null;
      }
    }
  }

  distanceBetweenPoints(p1, p2) {
    const R = 6371; // Radius of the Earth in km

    const p1lat = typeof p1.lat === 'function' ? p1.lat() : p1.lat;
    const p1lng = typeof p1.lng === 'function' ? p1.lng() : p1.lng;
    const p2lat = typeof p2.lat === 'function' ? p2.lat() : p2.lat;
    const p2lng = typeof p2.lng === 'function' ? p2.lng() : p2.lng;

    const dLat = ((p2lat - p1lat) * Math.PI) / 180;
    const dLon = ((p2lng - p1lng) * Math.PI) / 180;

    const a =
      Math.sin(dLat / 2) * Math.sin(dLat / 2) +
      Math.cos((p1lat * Math.PI) / 180) *
        Math.cos((p2lat * Math.PI) / 180) *
        Math.sin(dLon / 2) *
        Math.sin(dLon / 2);

    return R * (2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)));
  }

  isMarkerInBounds(marker, bounds) {
    const { position } = marker;

    if (position) {
      return bounds.contains(position);
    }

    return false;
  }

  addToClosestCluster(marker) {
    let cluster;

    let distance = 40000; // Some large number

    let clusterToAddTo = null;

    for (const clusterElement of this.clusters) {
      cluster = clusterElement;

      const center = cluster.getCenter();

      const { position } = marker;

      if (center && position) {
        const d = this.distanceBetweenPoints(center, position);

        if (d < distance) {
          distance = d;

          clusterToAddTo = cluster;
        }
      }
    }

    if (clusterToAddTo && clusterToAddTo.isMarkerInClusterBounds(marker)) {
      clusterToAddTo.addMarker(marker);
    } else {
      cluster = new Cluster(this);

      cluster.addMarker(marker);

      this.clusters.push(cluster);
    }
  }

  createClusters(iFirst) {
    if (!this.ready) {
      return;
    }

    // Cancel previous batch processing if we're working on the first batch:
    if (iFirst === 0) {
      /**
       * This event is fired when the <code>Clusterer</code> begins
       *  clustering markers.
       * @name Clusterer#clusteringbegin
       * @param {Clusterer} mc The Clusterer whose markers are being clustered.
       * @event
       */
      google.maps.event.trigger(this, 'clusteringbegin', this);

      if (this.timerRefStatic !== null) {
        window.clearTimeout(this.timerRefStatic);

        delete this.timerRefStatic;
      }
    }

    const { map } = this;

    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 =
      zoom > 3
        ? new google.maps.LatLngBounds(bounds?.getSouthWest(), bounds?.getNorthEast())
        : new google.maps.LatLngBounds(
            new google.maps.LatLng(85.02070771743472, -178.48388434375),
            new google.maps.LatLng(-85.08136444384544, 178.00048865625)
          );

    const extendedMapBounds = this.getExtendedBounds(mapBounds);

    const iLast = Math.min(iFirst + this.batchSize, this.markers.length);

    for (let i = iFirst; i < iLast; i++) {
      const marker = this.markers[i];

      if (
        marker &&
        !marker.isAdded &&
        this.isMarkerInBounds(marker, extendedMapBounds) &&
        (!this.ignoreHidden || (this.ignoreHidden && marker.getVisible()))
      ) {
        this.addToClosestCluster(marker);
      }
    }

    if (iLast < this.markers.length) {
      this.timerRefStatic = window.setTimeout(() => {
        this.createClusters(iLast);
      }, 0);
    } else {
      this.timerRefStatic = null;

      /**
       * This event is fired when the <code>Clusterer</code> stops
       *  clustering markers.
       * @name Clusterer#clusteringend
       * @param {Clusterer} mc The Clusterer whose markers are being clustered.
       * @event
       */
      google.maps.event.trigger(this, 'clusteringend', this);

      for (const cluster of this.clusters) {
        cluster.updateIcon();
      }
    }
  }

  extend(obj1, obj2) {
    return function applyExtend(object) {
      // eslint-disable-next-line guard-for-in
      for (const property in object.prototype) {
        this.prototype[property] = object.prototype[property];
      }
      return this;
    }.apply(obj1, [obj2]);
  }
}

Cluster.jsx

/* eslint-disable no-restricted-syntax */
/* global google */

import { ClusterIcon } from './ClusterIcon';

export class Cluster {
  markerClusterer;

  map;

  gridSize;

  minClusterSize;

  averageCenter;

  markers;

  center;

  bounds;

  clusterIcon;

  constructor(markerClusterer) {
    this.markerClusterer = markerClusterer;

    this.map = this.markerClusterer.getMap();

    this.gridSize = this.markerClusterer.getGridSize();

    this.minClusterSize = this.markerClusterer.getMinimumClusterSize();

    this.averageCenter = this.markerClusterer.getAverageCenter();

    this.markers = [];

    this.center = undefined;

    this.bounds = null;

    this.clusterIcon = new ClusterIcon(this, this.markerClusterer.getStyles());

    this.getSize = this.getSize.bind(this);
    this.getMarkers = this.getMarkers.bind(this);
    this.getCenter = this.getCenter.bind(this);
    this.getMap = this.getMap.bind(this);
    this.getClusterer = this.getClusterer.bind(this);
    this.getBounds = this.getBounds.bind(this);
    this.remove = this.remove.bind(this);
    this.addMarker = this.addMarker.bind(this);
    this.isMarkerInClusterBounds = this.isMarkerInClusterBounds.bind(this);
    this.calculateBounds = this.calculateBounds.bind(this);
    this.updateIcon = this.updateIcon.bind(this);
    this.isMarkerAlreadyAdded = this.isMarkerAlreadyAdded.bind(this);
  }

  getSize() {
    return this.markers.length;
  }

  getMarkers() {
    return this.markers;
  }

  getCenter() {
    return this.center;
  }

  getMap() {
    return this.map;
  }

  getClusterer() {
    return this.markerClusterer;
  }

  getBounds() {
    const bounds = new google.maps.LatLngBounds(this.center, this.center);

    const markers = this.getMarkers();

    for (const marker of markers) {
      const { position } = marker;

      if (position) {
        bounds.extend(position);
      }
    }

    return bounds;
  }

  remove() {
    this.clusterIcon.setMap(null);

    this.markers = [];

    delete this.markers;
  }

  addMarker(marker) {
    if (this.isMarkerAlreadyAdded(marker)) {
      return false;
    }

    if (!this.center) {
      const { position } = marker;

      if (position) {
        this.center = position;

        this.calculateBounds();
      }
    } else if (this.averageCenter) {
      const { position } = marker;

      if (position) {
        const length = this.markers.length + 1;

        this.center = new google.maps.LatLng(
          (this.center.lat() * (length - 1) + position.lat()) / length,
          (this.center.lng() * (length - 1) + position.lng()) / length
        );

        this.calculateBounds();
      }
    }

    marker.isAdded = true;

    this.markers.push(marker);

    const mCount = this.markers.length;

    const maxZoom = this.markerClusterer.getMaxZoom();

    const zoom = this.map?.getZoom();
    if (maxZoom !== null && typeof zoom !== 'undefined' && zoom > maxZoom) {
      // Zoomed in past max zoom, so show the marker.
      if (marker.map !== this.map) {
        marker.map = this.map;
      }
    } else if (mCount < this.minClusterSize) {
      // Min cluster size not reached so show the marker.
      if (marker.map !== this.map) {
        marker.map = this.map;
      }
    } else if (mCount === this.minClusterSize) {
      // Hide the markers that were showing.
      for (const markerElement of this.markers) {
        markerElement.map = null;
      }
    } else {
      marker.map = null;
    }

    return true;
  }

  isMarkerInClusterBounds(marker) {
    if (this.bounds !== null) {
      const { position } = marker;

      if (position) {
        return this.bounds.contains(position);
      }
    }

    return false;
  }

  calculateBounds() {
    this.bounds = this.markerClusterer.getExtendedBounds(
      new google.maps.LatLngBounds(this.center, this.center)
    );
  }

  updateIcon() {
    const mCount = this.markers.length;

    const maxZoom = this.markerClusterer.getMaxZoom();

    const zoom = this.map?.getZoom();

    if (maxZoom !== null && typeof zoom !== 'undefined' && zoom > maxZoom) {
      this.clusterIcon.hide();

      return;
    }

    if (mCount < this.minClusterSize) {
      // Min cluster size not yet reached.
      this.clusterIcon.hide();

      return;
    }

    if (this.center) {
      this.clusterIcon.setCenter(this.center);
    }

    this.clusterIcon.useStyle(
      this.markerClusterer.getCalculator()(this.markers, this.markerClusterer.getStyles().length)
    );

    this.clusterIcon.show();
  }

  isMarkerAlreadyAdded(marker) {
    if (this.markers.includes) {
      return this.markers.includes(marker);
    }

    for (let i = 0; i < this.markers.length; i++) {
      if (marker === this.markers[i]) {
        return true;
      }
    }

    return false;
  }
}

ClusterIcon.jsx

/* global google */

export class ClusterIcon {
  cluster;

  className;

  clusterClassName;

  styles;

  center;

  div;

  sums;

  visible;

  url;

  height;

  width;

  anchorText;

  anchorIcon;

  textColor;

  textSize;

  textDecoration;

  fontWeight;

  fontStyle;

  fontFamily;

  backgroundPosition;

  cMouseDownInCluster;

  cDraggingMapByCluster;

  timeOut;

  boundsChangedListener;

  constructor(cluster, styles) {
    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';

    this.cMouseDownInCluster = null;
    this.cDraggingMapByCluster = null;
    this.timeOut = null;

    this.setMap(cluster.getMap()); // Note: this causes onAdd to be called

    this.onBoundsChanged = this.onBoundsChanged.bind(this);
    this.onMouseDown = this.onMouseDown.bind(this);
    this.onClick = this.onClick.bind(this);
    this.onMouseOver = this.onMouseOver.bind(this);
    this.onMouseOut = this.onMouseOut.bind(this);
    this.onAdd = this.onAdd.bind(this);
    this.onRemove = this.onRemove.bind(this);
    this.draw = this.draw.bind(this);
    this.hide = this.hide.bind(this);
    this.show = this.show.bind(this);
    this.useStyle = this.useStyle.bind(this);
    this.setCenter = this.setCenter.bind(this);
    this.getPosFromLatLng = this.getPosFromLatLng.bind(this);
  }

  onBoundsChanged() {
    this.cDraggingMapByCluster = this.cMouseDownInCluster;
  }

  onMouseDown() {
    this.cMouseDownInCluster = true;

    this.cDraggingMapByCluster = false;
  }

  onClick(event) {
    this.cMouseDownInCluster = false;

    if (!this.cDraggingMapByCluster) {
      const markerClusterer = 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, 'click', this.cluster);
      google.maps.event.trigger(markerClusterer, 'clusterclick', this.cluster); // deprecated name

      // The default click handler follows. Disable it by setting
      // the zoomOnClick property to false.
      if (markerClusterer.getZoomOnClick()) {
        // Zoom into the cluster.
        const maxZoom = markerClusterer.getMaxZoom();

        const bounds = this.cluster.getBounds();

        const map = markerClusterer.getMap();

        if (map !== null && 'fitBounds' in map) {
          map.fitBounds(bounds);
        }

        // There is a fix for Issue 170 here:
        this.timeOut = window.setTimeout(() => {
          const _map = markerClusterer.getMap();

          if (_map !== null) {
            if ('fitBounds' in _map) {
              _map.fitBounds(bounds);
            }

            const zoom = _map.getZoom() || 0;

            // Don't zoom beyond the max zoom level
            if (maxZoom !== null && zoom > maxZoom) {
              _map.setZoom(maxZoom + 1);
            }
          }
        }, 100);
      }

      // Prevent event propagation to the map:
      event.cancelBubble = true;

      if (event.stopPropagation) {
        event.stopPropagation();
      }
    }
  }

  onMouseOver() {
    /**
     * 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);
  }

  onMouseOut() {
    /**
     * 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);
  }

  onAdd() {
    this.div = document.createElement('div');

    this.div.className = this.className;

    if (this.visible) {
      this.show();
    }

    this.getPanes()?.overlayMouseTarget.appendChild(this.div);

    const map = this.getMap();

    if (map !== null) {
      // Fix for Issue 157
      this.boundsChangedListener = google.maps.event.addListener(
        map,
        '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);
    }
  }

  onRemove() {
    if (this.div && this.div.parentNode) {
      this.hide();

      if (this.boundsChangedListener !== null) {
        google.maps.event.removeListener(this.boundsChangedListener);
      }

      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;
    }
  }

  draw() {
    if (this.visible && this.div !== null && this.center) {
      const pos = this.getPosFromLatLng(this.center);

      this.div.style.top = pos !== null ? `${pos.y}px` : '0';
      this.div.style.left = pos !== null ? `${pos.x}px` : '0';
    }
  }

  hide() {
    if (this.div) {
      this.div.style.display = 'none';
    }

    this.visible = false;
  }

  show() {
    if (this.div && this.center) {
      const divTitle =
        this.sums === null || typeof this.sums.title === 'undefined' || this.sums.title === ''
          ? this.cluster.getClusterer().getTitle()
          : this.sums.title;

      // NOTE: values must be specified in px units
      const bp = this.backgroundPosition.split(' ');

      const spriteH = parseInt(bp[0]?.replace(/^\s+|\s+$/g, '') || '0', 10);
      const spriteV = parseInt(bp[1]?.replace(/^\s+|\s+$/g, '') || '0', 10);

      const pos = this.getPosFromLatLng(this.center);

      this.div.className = this.className;
      this.div.setAttribute(
        'style',
        `cursor: pointer; position: absolute; top: ${pos !== null ? `${pos.y}px` : '0'}; left: ${
          pos !== null ? `${pos.x}px` : '0'
        }; width: ${this.width}px; height: ${this.height}px; `
      );

      const img = document.createElement('img');

      img.alt = divTitle;
      img.src = this.url;
      img.width = this.width;
      img.height = this.height;
      img.setAttribute('style', `position: absolute; top: ${spriteV}px; left: ${spriteH}px`);

      if (!this.cluster.getClusterer().enableRetinaIcons) {
        img.style.clip = `rect(-${spriteV}px, -${spriteH + this.width}px, -${
          spriteV + this.height
        }, -${spriteH})`;
      }

      const textElm = document.createElement('div');

      textElm.setAttribute(
        'style',
        `position: absolute; top: ${this.anchorText[0]}px; left: ${this.anchorText[1]}px; color: ${this.textColor}; font-size: ${this.textSize}px; font-family: ${this.fontFamily}; font-weight: ${this.fontWeight}; fontStyle: ${this.fontStyle}; text-decoration: ${this.textDecoration}; text-align: center; width: ${this.width}px; line-height: ${this.height}px`
      );

      if (this.sums?.text) textElm.innerText = `${this.sums?.text}`;
      if (this.sums?.html) textElm.innerHTML = `${this.sums?.html}`;

      this.div.innerHTML = '';

      this.div.appendChild(img);
      this.div.appendChild(textElm);

      this.div.title = divTitle;

      this.div.style.display = '';
    }

    this.visible = true;
  }

  useStyle(sums) {
    this.sums = sums;

    const styles = this.cluster.getClusterer().getStyles();

    const style = styles[Math.min(styles.length - 1, Math.max(0, sums.index - 1))];

    if (style) {
      this.url = style.url;
      this.height = style.height;
      this.width = style.width;

      if (style.className) {
        this.className = `${this.clusterClassName} ${style.className}`;
      }

      this.anchorText = style.anchorText || [0, 0];
      this.anchorIcon = style.anchorIcon || [this.height / 2, this.width / 2];

      this.textColor = style.textColor || 'black';

      this.textSize = style.textSize || 11;

      this.textDecoration = style.textDecoration || 'none';

      this.fontWeight = style.fontWeight || 'bold';

      this.fontStyle = style.fontStyle || 'normal';

      this.fontFamily = style.fontFamily || 'Arial,sans-serif';

      this.backgroundPosition = style.backgroundPosition || '0 0';
    }
  }

  setCenter(center) {
    this.center = center;
  }

  getPosFromLatLng(latlng) {
    const pos = this.getProjection().fromLatLngToDivPixel(latlng);

    if (pos !== null) {
      pos.x -= this.anchorIcon[1];

      pos.y -= this.anchorIcon[0];
    }

    return pos;
  }
}

[lovedeep5]

If anyone can help me set up this project locally, I can create AdvancedMarker and cluster things.
Help me step by step project installation.
With node version, npm version, Yarn version etc

[Fabioni]

This is the main problem why this repo is dying. I would also have preferred to add the AdvancedMarker to the repo instead of copying and pasting it into an issue haha.

I spoke to the owner @JustFly1984 and even he no longer has a properly working setup.

If you're willing to go through the setup pain, I think this would be an important contribution to the continuation of this repo.

[Fabioni]

I think actually think, it would be best to just make a clean restart of the dev setup for this repo, but I do not have enough experience with setting up a github/npm project.

[lovedeep5]

Yeah I agree, I was thinking of maintaining this project, and tried many times, unfortunately looks like it is impossible to set this up locally, it keeps throwing one error after other, I try upgrading/downgrading node, npm, yarn, react everything but its keep complaining about something, don't know what to do.

[Fabioni]

Exactly my experience. As I said, I think just setting it up completely new is maybe the best option. Maybe even create a new fork and we both take care of it.

[jukkahuuskonen]

I am not too happy with the performance of my MarkerClusterer, not that the original one worked too well either. I tried to fix it a bit and at the same time simplified usage a bit. Now markers can be just added as children of the MarkerClusterer without the render function:
OLD:

  <MarkerClusterer
      maxZoom={16}
      styles={clusterStyles}
      imageExtension='svg'
      calculator={calculator}
    >
      {clusterer => (
        <AdvancedMarker clusterer={clusterer} ...  />
        <AdvancedMarker clusterer={clusterer} ...  />
        <AdvancedMarker clusterer={clusterer} ...  />
        ...
      )}
    </MarkerClusterer>

NEW:

  <MarkerClusterer
      maxZoom={16}
      styles={clusterStyles}
      imageExtension='svg'
      calculator={calculator}
    >
      <AdvancedMarker ...  />
      <AdvancedMarker ...  />
      <AdvancedMarker ...  />
      ...
    </MarkerClusterer>

This required some changes to the MarkerClusterer and AdvancedMarker
And here is the code for the new MarkerClusterer, basically I just had to add getting zoomLevel from map passing zoomLvl and clusterer-instance to the Markers.

/* global google */
import { Children, cloneElement, useState, memo, useContext, useEffect, useRef } from 'react';
import { MapContext } from '@react-google-maps/api';
import { Clusterer } from './Clusterer';

const eventMap = {
  onClick: 'click',
  onClusteringBegin: 'clusteringbegin',
  onClusteringEnd: 'clusteringend',
  onMouseOut: 'mouseout',
  onMouseOver: 'mouseover',
};

const updaterMap = {
  averageCenter(instance, averageCenter) {
    instance.setAverageCenter(averageCenter);
  },

  batchSizeIE(instance, batchSizeIE) {
    instance.setBatchSizeIE(batchSizeIE);
  },

  calculator(instance, calculator) {
    instance.setCalculator(calculator);
  },

  clusterClass(instance, clusterClass) {
    instance.setClusterClass(clusterClass);
  },

  enableRetinaIcons(instance, enableRetinaIcons) {
    instance.setEnableRetinaIcons(enableRetinaIcons);
  },

  gridSize(instance, gridSize) {
    instance.setGridSize(gridSize);
  },

  ignoreHidden(instance, ignoreHidden) {
    instance.setIgnoreHidden(ignoreHidden);
  },

  imageExtension(instance, imageExtension) {
    instance.setImageExtension(imageExtension);
  },

  imagePath(instance, imagePath) {
    instance.setImagePath(imagePath);
  },

  imageSizes(instance, imageSizes) {
    instance.setImageSizes(imageSizes);
  },

  maxZoom(instance, maxZoom) {
    instance.setMaxZoom(maxZoom);
  },

  minimumClusterSize(instance, minimumClusterSize) {
    instance.setMinimumClusterSize(minimumClusterSize);
  },

  styles(instance, styles) {
    instance.setStyles(styles);
  },

  title(instance, title) {
    instance.setTitle(title);
  },

  zoomOnClick(instance, zoomOnClick) {
    instance.setZoomOnClick(zoomOnClick);
  },
};

const defaultOptions = {};

function MarkerClustererFunctional(props) {
  const {
    children: _children,
    options,
    averageCenter,
    batchSizeIE,
    calculator,
    clusterClass,
    enableRetinaIcons,
    gridSize,
    ignoreHidden,
    imageExtension,
    imagePath,
    imageSizes,
    maxZoom,
    minimumClusterSize,
    styles,
    title,
    zoomOnClick,
    onClick,
    onClusteringBegin,
    onClusteringEnd,
    onMouseOver,
    onMouseOut,
    onLoad,
    onUnmount,
  } = props;
  const children = Children.toArray(_children);
  const [instance, setInstance] = useState(null);
  const instanceRef = useRef(instance);
  instanceRef.current = instance;
  const map = useContext(MapContext);
  const [zoom, setZoom] = useState(map?.zoom || 14);

  const [clickListener, setClickListener] = useState(null);
  const [clusteringBeginListener, setClusteringBeginListener] = useState(null);
  const [clusteringEndListener, setClusteringEndListener] = useState(null);
  const [mouseoutListener, setMouseoutListener] = useState(null);
  const [mouseoverListener, setMouseoverListener] = useState(null);

  const clickListenerRef = useRef(clickListener);
  const clusteringBeginListenerRef = useRef(clusteringBeginListener);
  const clusteringEndListenerRef = useRef(clusteringEndListener);
  const mouseoutListenerRef = useRef(mouseoutListener);
  const mouseoverListenerRef = useRef(mouseoverListener);

  clickListenerRef.current = clickListener;
  clusteringBeginListenerRef.current = clusteringBeginListener;
  clusteringEndListenerRef.current = clusteringEndListener;
  mouseoutListenerRef.current = mouseoutListener;
  mouseoverListenerRef.current = mouseoverListener;

  useEffect(() => {
    if (instanceRef.current) {
      setTimeout(() => {
        instanceRef.current.onZoomChanged();
      });
    }
  }, [zoom]);

  useEffect(() => {
    const zoomListener = () => {
      setZoom(map.zoom);
    };
    let listener;
    if (map) {
      listener = map.addListener('zoom_changed', zoomListener);
    }
    return () => {
      if (listener) {
        google.maps.event.removeListener(listener);
      }
    };
  }, [map]);

  useEffect(() => {
    if (instanceRef.current && onMouseOut) {
      if (mouseoutListenerRef.current !== null) {
        google.maps.event.removeListener(mouseoutListenerRef.current);
      }

      setMouseoutListener(
        google.maps.event.addListener(instanceRef.current, eventMap.onMouseOut, onMouseOut)
      );
    }
  }, [onMouseOut]);

  useEffect(() => {
    if (instanceRef.current && onMouseOver) {
      if (mouseoverListenerRef.current !== null) {
        google.maps.event.removeListener(mouseoverListenerRef.current);
      }

      setMouseoverListener(
        google.maps.event.addListener(instanceRef.current, eventMap.onMouseOver, onMouseOver)
      );
    }
  }, [onMouseOver]);

  useEffect(() => {
    if (instanceRef.current && onClick) {
      if (clickListenerRef.current !== null) {
        google.maps.event.removeListener(clickListenerRef.current);
      }

      setClickListener(
        google.maps.event.addListener(instanceRef.current, eventMap.onClick, onClick)
      );
    }
  }, [onClick]);

  useEffect(() => {
    if (instanceRef.current && onClusteringBegin) {
      if (clusteringBeginListenerRef.current !== null) {
        google.maps.event.removeListener(clusteringBeginListenerRef.current);
      }
      setClusteringBeginListener(
        google.maps.event.addListener(
          instanceRef.current,
          eventMap.onClusteringBegin,
          onClusteringBegin
        )
      );
    }
  }, [onClusteringBegin]);

  useEffect(() => {
    if (instanceRef.current && onClusteringEnd) {
      if (clusteringEndListenerRef.current !== null) {
        google.maps.event.removeListener(clusteringEndListenerRef.current);
      }

      setClusteringEndListener(
        google.maps.event.addListener(
          instanceRef.current,
          eventMap.onClusteringEnd,
          onClusteringEnd
        )
      );
    }
  }, [onClusteringEnd]);

  useEffect(() => {
    if (typeof averageCenter !== 'undefined' && instanceRef.current !== null) {
      updaterMap.averageCenter(instanceRef.current, averageCenter);
    }
  }, [averageCenter]);

  useEffect(() => {
    if (typeof batchSizeIE !== 'undefined' && instanceRef.current !== null) {
      updaterMap.batchSizeIE(instanceRef.current, batchSizeIE);
    }
  }, [batchSizeIE]);

  useEffect(() => {
    if (typeof calculator !== 'undefined' && instanceRef.current !== null) {
      updaterMap.calculator(instanceRef.current, calculator);
    }
  }, [calculator]);

  useEffect(() => {
    if (typeof clusterClass !== 'undefined' && instanceRef.current !== null) {
      updaterMap.clusterClass(instanceRef.current, clusterClass);
    }
  }, [clusterClass]);

  useEffect(() => {
    if (typeof enableRetinaIcons !== 'undefined' && instanceRef.current !== null) {
      updaterMap.enableRetinaIcons(instanceRef.current, enableRetinaIcons);
    }
  }, [enableRetinaIcons]);

  useEffect(() => {
    if (typeof gridSize !== 'undefined' && instanceRef.current !== null) {
      updaterMap.gridSize(instanceRef.current, gridSize);
    }
  }, [gridSize]);

  useEffect(() => {
    if (typeof ignoreHidden !== 'undefined' && instanceRef.current !== null) {
      updaterMap.ignoreHidden(instanceRef.current, ignoreHidden);
    }
  }, [ignoreHidden]);

  useEffect(() => {
    if (typeof imageExtension !== 'undefined' && instanceRef.current !== null) {
      updaterMap.imageExtension(instanceRef.current, imageExtension);
    }
  }, [imageExtension]);

  useEffect(() => {
    if (typeof imagePath !== 'undefined' && instanceRef.current !== null) {
      updaterMap.imagePath(instanceRef.current, imagePath);
    }
  }, [imagePath]);

  useEffect(() => {
    if (typeof imageSizes !== 'undefined' && instanceRef.current !== null) {
      updaterMap.imageSizes(instanceRef.current, imageSizes);
    }
  }, [imageSizes]);

  useEffect(() => {
    if (typeof maxZoom !== 'undefined' && instanceRef.current !== null) {
      updaterMap.maxZoom(instanceRef.current, maxZoom);
    }
  }, [maxZoom]);

  useEffect(() => {
    if (typeof minimumClusterSize !== 'undefined' && instanceRef.current !== null) {
      updaterMap.minimumClusterSize(instanceRef.current, minimumClusterSize);
    }
  }, [minimumClusterSize]);

  useEffect(() => {
    if (typeof styles !== 'undefined' && instanceRef.current !== null) {
      updaterMap.styles(instanceRef.current, styles);
    }
  }, [styles]);

  useEffect(() => {
    if (typeof title !== 'undefined' && instanceRef.current !== null) {
      updaterMap.title(instanceRef.current, title);
    }
  }, [title]);

  useEffect(() => {
    if (typeof zoomOnClick !== 'undefined' && instanceRef.current !== null) {
      updaterMap.zoomOnClick(instanceRef.current, zoomOnClick);
    }
  }, [zoomOnClick]);

  useEffect(() => {
    if (!map) return;

    const clustererOptions = {
      ...(options || defaultOptions),
    };
    const clusterer = instanceRef.current || new Clusterer(map, [], clustererOptions);

    if (averageCenter) {
      updaterMap.averageCenter(clusterer, averageCenter);
    }

    if (batchSizeIE) {
      updaterMap.batchSizeIE(clusterer, batchSizeIE);
    }

    if (calculator) {
      updaterMap.calculator(clusterer, calculator);
    }

    if (clusterClass) {
      updaterMap.clusterClass(clusterer, clusterClass);
    }

    if (enableRetinaIcons) {
      updaterMap.enableRetinaIcons(clusterer, enableRetinaIcons);
    }

    if (gridSize) {
      updaterMap.gridSize(clusterer, gridSize);
    }

    if (ignoreHidden) {
      updaterMap.ignoreHidden(clusterer, ignoreHidden);
    }

    if (imageExtension) {
      updaterMap.imageExtension(clusterer, imageExtension);
    }

    if (imagePath) {
      updaterMap.imagePath(clusterer, imagePath);
    }

    if (imageSizes) {
      updaterMap.imageSizes(clusterer, imageSizes);
    }

    if (maxZoom) {
      updaterMap.maxZoom(clusterer, maxZoom);
    }

    if (minimumClusterSize) {
      updaterMap.minimumClusterSize(clusterer, minimumClusterSize);
    }

    if (styles) {
      updaterMap.styles(clusterer, styles);
    }

    if (title) {
      updaterMap.title(clusterer, title);
    }

    if (zoomOnClick) {
      updaterMap.zoomOnClick(clusterer, zoomOnClick);
    }

    if (onMouseOut) {
      setMouseoutListener(
        google.maps.event.addListener(clusterer, eventMap.onMouseOut, onMouseOut)
      );
    }

    if (onMouseOver) {
      setMouseoverListener(
        google.maps.event.addListener(clusterer, eventMap.onMouseOver, onMouseOver)
      );
    }

    if (onClick) {
      setClickListener(google.maps.event.addListener(clusterer, eventMap.onClick, onClick));
    }

    if (onClusteringBegin) {
      setClusteringBeginListener(
        google.maps.event.addListener(clusterer, eventMap.onClusteringBegin, onClusteringBegin)
      );
    }

    if (onClusteringEnd) {
      setClusteringEndListener(
        google.maps.event.addListener(clusterer, eventMap.onClusteringEnd, onClusteringEnd)
      );
    }

    setInstance(clusterer);

    if (onLoad) {
      onLoad(clusterer);
    }

    return () => {
      if (mouseoutListener !== null) {
        google.maps.event.removeListener(mouseoutListener);
      }

      if (mouseoverListener !== null) {
        google.maps.event.removeListener(mouseoverListener);
      }

      if (clickListener !== null) {
        google.maps.event.removeListener(clickListener);
      }

      if (clusteringBeginListenerRef.current !== null) {
        google.maps.event.removeListener(clusteringBeginListenerRef.current);
      }

      if (clusteringEndListenerRef.current !== null) {
        google.maps.event.removeListener(clusteringEndListenerRef.current);
      }

      if (onUnmount) {
        onUnmount(clusterer);
      }
    };
  }, [
    averageCenter,
    batchSizeIE,
    calculator,
    clickListener,
    clusterClass,
    enableRetinaIcons,
    gridSize,
    ignoreHidden,
    imageExtension,
    imagePath,
    imageSizes,
    map,
    maxZoom,
    minimumClusterSize,
    mouseoutListener,
    mouseoverListener,
    onClick,
    onClusteringBegin,
    onClusteringEnd,
    onLoad,
    onMouseOut,
    onMouseOver,
    onUnmount,
    options,
    styles,
    title,
    zoomOnClick,
  ]);

  if (!children || children.length === 0) {
    return null;
  }

  return children.map(Child => cloneElement(Child, { clusterer: instance, zoomLvl: zoom }));
}

const MarkerClustererF = memo(MarkerClustererFunctional);

export default MarkerClustererF;

And here is new code for AdvancedMarker, The only real change is getting the clusterer from map instead of props and getting the map zoomLvl from props, zoomLvl is not needed when not using the MarkerClusterer.:

/* global google */
// Based on https://github.dev/visgl/react-google-maps because the original package is not maintained anymore and misses advanced markers

import React, {
  Children,
  forwardRef,
  useCallback,
  useContext,
  useEffect,
  useImperativeHandle,
  useMemo,
  useRef,
  useState,
} from 'react';

import { createPortal } from 'react-dom';

import { MapContext } from '@react-google-maps/api';

export const AdvancedMarkerContext = React.createContext(null);

const defaultOptions = {};

function useAdvancedMarker(props) {
  const [marker, setMarker] = useState(null);
  const [contentContainer, setContentContainer] = useState(null);

  const map = useContext(MapContext);
  const markerLibrary = google.maps.marker;

  const {
    children,
    anchorAbove,
    className,
    clickable,
    clusterer,
    collisionBehavior,
    draggable,
    noClustererRedraw,
    onClick,
    onDrag,
    onDragEnd,
    onDragStart,
    onMouseOut,
    onMouseOver,
    onRightClick,
    options,
    position,
    title,
    zIndex,
    zoomLvl,
  } = props;

  const clustererRef = useRef(clusterer);
  clustererRef.current = clusterer;
  const mapRef = useRef(map);
  mapRef.current = map;

  const classNameRef = useRef(className);
  classNameRef.current = className;
  const numChilds = Children.count(children);

  // create marker instance and add it to the map when map becomes available
  useEffect(() => {
    if (!mapRef.current || !markerLibrary) {
      return;
    }
    const markerOptions = {
      ...(options || defaultOptions),
      ...(clustererRef.current ? defaultOptions : { map: mapRef.current }),
      position,
    };
    const newMarker = new markerLibrary.AdvancedMarkerElement(markerOptions);

    if (clustererRef.current) {
      clustererRef.current.addMarker(newMarker, !!noClustererRedraw);
    } else {
      newMarker.map = mapRef.current;
    }

    setMarker(newMarker);

    // create container for marker content if there are children
    if (numChilds > 0) {
      const el = document.createElement('div');
      if (!anchorAbove) el.style.transform = 'translate(0, 50%)';
      if (classNameRef.current) el.className = classNameRef.current;

      newMarker.content = el;

      setContentContainer(el);
    }

    return () => {
      if (clustererRef.current) {
        clustererRef.current.removeMarker(newMarker, !!noClustererRedraw);
      } else if (newMarker) {
        newMarker.map = null;
        setMarker(null);
        setContentContainer(null);
      }
    };
    // We do not want to re-render the whole marker when the className changes
    // because that causes a short flickering of the marker.
    // The className update is handled in the useEffect below.
    // Excluding the className from the dependency array onm purpose here
  }, [anchorAbove, markerLibrary, noClustererRedraw, numChilds, options, position, zoomLvl]);

  useEffect(() => {
    if ((className?.includes('translate') || className?.includes('transform')) && !anchorAbove)
      console.warn(
        "not setting anchorAbove automatically set 'transform: translate(0, 50%)' to center the marker on the position. Set this to false to be able to use custom translate values."
      );
  }, [className, anchorAbove]);

  // update className of advanced marker element
  useEffect(() => {
    if (!contentContainer) return;
    contentContainer.className = className ?? '';
  }, [contentContainer, className]);

  // bind all marker events
  useEffect(() => {
    if (!marker) return;

    const gme = google.maps.event;

    const controller = new AbortController();
    const { signal } = controller;

    // TODO fix the type mismatch for click and contextmenu events
    // marker.addEventListener("gmp-click", (e: google.maps.marker.AdvancedMarkerClickEvent) => { console.log(e) }); // only available in beta and misses some properties, check https://issuetracker.google.com/issues/331684436

    if (onMouseOver) gme.addListener(marker, 'onmouseover', e => onMouseOver(e.domEvent));
    if (onMouseOut) gme.addListener(marker, 'onmouseout', e => onMouseOut(e.domEvent));
    if (onClick && clickable) gme.addListener(marker, 'click', e => onClick(e.domEvent));
    if (onRightClick && clickable)
      marker.content?.addEventListener('contextmenu', onRightClick, { signal }); // setting marker.addEventListener directly onces this is out of beta
    if (onDrag && draggable) gme.addListener(marker, 'drag', onDrag);
    if (onDragStart && draggable) gme.addListener(marker, 'dragstart', onDragStart);
    if (onDragEnd && draggable) gme.addListener(marker, 'dragend', onDragEnd);

    if ((onDrag || onDragStart || onDragEnd) && !draggable) {
      console.warn('You need to set the marker to draggable to listen to drag-events.');
    }

    if ((onClick && !clickable) || (onRightClick && !clickable)) {
      console.warn('You need to set the marker to clickable to listen to click-events.');
    }

    const m = marker;
    return () => {
      gme.clearInstanceListeners(m); // for addListener
      controller.abort(); // for addEventListener
    };
  }, [
    marker,
    draggable,
    onClick,
    onDragStart,
    onDrag,
    onDragEnd,
    onRightClick,
    clickable,
    onMouseOver,
    onMouseOut,
  ]);

  // update other marker props when changed
  useEffect(() => {
    if (!marker) return;
    if (position !== undefined) {
      marker.position = position;
    }
    if (draggable !== undefined) marker.gmpDraggable = draggable;
    // use marker.gmpClickable once this is resolved https://issuetracker.google.com/issues/331684436
    if (collisionBehavior !== undefined) marker.collisionBehavior = collisionBehavior;
    if (zIndex !== undefined) marker.zIndex = zIndex;
    if (typeof title === 'string') marker.title = title;
  }, [marker, position, draggable, collisionBehavior, zIndex, title, clickable]);

  return [marker, contentContainer];
}

const AdvancedMarkerComponent = forwardRef((props, ref) => {
  const { children } = props;
  const [marker, contentContainer] = useAdvancedMarker(props);

  const advancedMarkerContextValue = useMemo(() => (marker ? { marker } : null), [marker]);

  useImperativeHandle(ref, () => marker, [marker]);

  if (!marker) {
    return null;
  }

  return (
    <AdvancedMarkerContext.Provider value={advancedMarkerContextValue}>
      {contentContainer !== null && createPortal(children, contentContainer)}
    </AdvancedMarkerContext.Provider>
  );
});
AdvancedMarkerComponent.displayName = 'AdvancedMarker';
export const AdvancedMarker = AdvancedMarkerComponent;

export function useAdvancedMarkerRef() {
  const [marker, setMarker] = useState(null);

  const refCallback = useCallback(m => {
    setMarker(m);
  }, []);

  return [refCallback, marker];
}