Marker Clusterer

[mortvicious]

So I've had a bit issues with implementation of clusterer and I wrote down this kind of code. Quality is not good, typings either, but maybe there is someone who struggled like me (I'm building local Real Estate Marketplace platform), those, who have the issues with complete markers redraws on complex search filters changes. I've built this hook:
Imports included for clearness.

Hook

useMarkerClusterer.tsx

import React, { type FC, useCallback, useEffect, useRef, useState } from 'react'
import { debounce } from 'lodash'
import { MarkerClusterer } from '@googlemaps/markerclusterer'
import type { Marker } from '@googlemaps/markerclusterer'
import { InfoWindow, useMap } from '@vis.gl/react-google-maps'

const useMarkerClusterer = () => {
  const map = useMap()
  const markersRef = useRef<MarkerType>({})
  const [markers, setMarkers] = useState<MarkerType>({})
  const clusterer = useRef<MarkerClusterer | null>(null)
  const hasMarkersChanged = (
    prevMarkers: { [key: string]: Marker },
    newMarkers: { [key: string]: Marker },
  ) => {
    if (Object.keys(prevMarkers).length !== Object.keys(newMarkers).length)
      return true
    for (const key in newMarkers) {
      if (newMarkers[key] !== prevMarkers[key]) return true
    }
    return false
  }

  const debouncedUpdateMarkers = useCallback(
    debounce(() => {
      setMarkers((prevMarkers) => {
        const newMarkers = { ...markersRef.current }
        if (hasMarkersChanged(prevMarkers, newMarkers)) {
          return newMarkers
        }
        return prevMarkers
      })
    }, 200),
    [markers],
  )

  const setMarkerRef = (marker: Marker | null, key: string) => {
    if (marker && markersRef.current[key]) return
    if (!marker && !markersRef.current[key]) return

    if (marker) {
      markersRef.current = {
        ...markersRef.current,
        [key]: marker,
      }
    } else {
      const { [key]: _, ...rest } = markersRef.current
      markersRef.current = rest
    }

    debouncedUpdateMarkers()
  }

  // Initialize MarkerClusterer
  useEffect(() => {
    if (!map) return
    if (!clusterer.current) {
      clusterer.current = new MarkerClusterer({ map, renderer: renderer })
    }
  }, [map])

  // Update markers
  useEffect(() => {
    if (!clusterer.current) return
    clusterer.current.clearMarkers()
    clusterer.current.addMarkers(Object.values(markers))
  }, [Object.keys(markers).length])

  const renderer = {
    render({ count, position }) {
      if (!position) return
      return new google.maps.marker.AdvancedMarkerElement({
        map,
        position,
        content: createMarker(count),
        zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
      })
    },
  }

  return {
    setMarkerRef,
  }
}

Usage

Forward ref if custom marker:

CustomMarker.tsx

import React, { type FC, forwardRef, type Ref } from 'react'
import { AdvancedMarker, type AdvancedMarkerProps } from '@vis.gl/react-google-maps'

interface MarkerProps extends Omit<AdvancedMarkerProps, 'ref'> {
  //marker props
}
const Marker: FC<MarkerProps> = forwardRef(
  (props, ref: Ref<google.maps.marker.AdvancedMarkerElement> | undefined) => {
    //marker logic
    return (
      <AdvancedMarker {...props} ref={ref}>
        //jsx here
      </AdvancedMarker>
    )
  },
)

Example.tsx

interface ExampleProps {
  markers: Marker
}
const Example: FC<ExampleProps> = (markers) => {
  const { setMarkerRef } = useMarkerClusterer()

  return markers.map((marker) => (
    <Marker
      key={marker.id}
      position={marker.position}
      ref={(ref) => setMarkerRef(ref, marker.id)}
    />
  ))
}

createMarker.ts

Create your own clusterer icon, this is just my own usage (white circle with number)

const createMarker = (value: number | string): HTMLDivElement => {
  const component = document.createElement('div')
  component.innerHTML = `
    <div class="estate-marker clusterer-marker">
      <span>${value}</span>
    </div>
  `

  return component
}