markerclusterer only renders individual markers

[lucksp]

First, I have tried the most similar thread with no luck. But basing my code on the your Cluster example, I am only able to get the individual Markers to render, without the clustering.

Here is my data set example:

[
    {
        "lat": 37.1197643,
        "lng": -106.3765601
    },
    {
        "lat": 39.429618,
        "lng": -106.043536
    },
    {
        "lat": 39.5349739,
        "lng": -107.3312201
    },
    {
        "lat": 39.3307696,
        "lng": -105.1820808
    },
    {
        "lat": 38.969369,
        "lng": -105.58363
    },
    {
        "lat": 38.96946060000001,
        "lng": -105.5841683
    },
    {
        "lat": 38.969369,
        "lng": -105.58363
    },
    {
        "lat": 39.547945,
        "lng": -107.322297
    },
    {
        "lat": 39.5366974,
        "lng": -107.3316703
    },
    {
        "lat": 39.2417167,
        "lng": -105.2544959
    },
    {
        "lat": 38.969369,
        "lng": -105.58363
    },
    {
        "lat": 39.7582752,
        "lng": -105.2199278
    },
    {
        "lat": 38.47062440000001,
        "lng": -105.8729848
    }
]

And here are my React Components, which basically is a copy of the Vis.GL example:

// initialize the map:

<Map
          mapId="my-map"
        >
          {data?.length && <LocationMarkers data={data} />}
        </Map>

import { type Marker, MarkerClusterer } from '@googlemaps/markerclusterer';
import { InfoWindow, useMap } from '@vis.gl/react-google-maps';

export const LocationMarkers = ({ data }: Props) => {
  const [markers, setMarkers] = useState<{ [key: string]: Marker }>({});
  const [selectedMarkerKey, setSelectedMarkerKey] = useState<string | null>(
    null
  );

  const map = useMap('my-map');
  const clusterer = useMemo(() => {
    if (!map) return null;

    return new MarkerClusterer({ map });
  }, [map]);

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

    clusterer.clearMarkers();
    clusterer.addMarkers(Object.values(markers));
  }, [clusterer, markers]);

  // this callback will effectively get passsed as ref to the markers to keep
  // tracks of markers currently on the map
  const setMarkerRef = useCallback((marker: Marker | null, key: string) => {
    setMarkers((markers) => {
      if ((marker && markers[key]) || (!marker && !markers[key]))
        return markers;

      if (marker) {
        return { ...markers, [key]: marker };
      } else {
        const { [key]: _, ...newMarkers } = markers;

        return newMarkers;
      }
    });
  }, []);

  const handleInfoWindowClose = useCallback(() => {
    setSelectedMarkerKey(null);
  }, []);

  const handleMarkerClick = useCallback((entry: Entry) => {
    setSelectedMarkerKey(entry.id);
  }, []);

  return (
    <>
      {data.map((entry) => (
        <EntryMarker
          entry={entry}
          key={entry.id}
          onClick={handleMarkerClick}
          setMarkerRef={setMarkerRef}
        />
      ))}

      {selectedMarkerKey && (
        <InfoWindow
          anchor={markers[selectedMarkerKey]}
          onCloseClick={handleInfoWindowClose}
        >
          {selectedMarkerKey}
        </InfoWindow>
      )}
    </>
  );
};

import type { Marker } from '@googlemaps/markerclusterer';
import { AdvancedMarker } from '@vis.gl/react-google-maps';


export const EntryMarker = (props: EntryMarkerProps) => {
  const { entry, onClick, setMarkerRef } = props;

  const handleClick = useCallback(() => onClick(entry), [onClick, entry]);
  const ref = useCallback(
    (marker: google.maps.marker.AdvancedMarkerElement) =>
      setMarkerRef(marker, entry.id),
    [setMarkerRef, entry.id]
  );

  return (
    <AdvancedMarker
      onClick={handleClick}
      position={entry.location.geometry.location}
      ref={ref}
    >
      <FiMapPin color="#0E70F1" fill="white" size={24} />
    </AdvancedMarker>
  );
};

Any ideas on why my data only renders the pins, not the cluster?

[febLey]

@lucksp I see the discussion has been closed, did you figure it out?

[lucksp]

Yes, all was good.

Upgrading to react native 79 / Expo 53 is another story...

[febLey]

Do you remember how you solved it, since I'm having the same issue right now?

[lucksp]

sorry! I thought this was my mobile app...LOL.

main map component:

<Map
            colorScheme="FOLLOW_SYSTEM"
            defaultCenter={defaultCenter}
            defaultZoom={4}
            disableDefaultUI={true}
            gestureHandling="cooperative"
            id={MAP_ID}
            mapId={MAP_ID}
            mapTypeId="terrain"
            minZoom={4}
            style={mapContainerStyle}
          >
            {data?.length && <LocationMarkers data={data} />}
          </Map>

and

import { AdvancedMarker } from '@vis.gl/react-google-maps';
import React, { useCallback, useEffect, useRef } from 'react';
import { FiMapPin } from 'react-icons/fi';

import { Entry } from '../types';

export type EntryMarkerProps = {
  entry: Entry,
  onClick: (entry: Entry) => void,
  setMarkerRef: (
    marker: google.maps.marker.AdvancedMarkerElement | null,
    key: string
  ) => void
};

/**
 * Wrapper Component for an AdvancedMarker for a single tree.
 */
export const EntryMarker = (props: EntryMarkerProps) => {
  const { entry, onClick, setMarkerRef } = props;
  const markerRef = useRef<google.maps.marker.AdvancedMarkerElement>(null);

  const handleClick = useCallback(() => onClick(entry), [onClick, entry]);
  const ref = useCallback(
    (marker: google.maps.marker.AdvancedMarkerElement) => {
      if (marker) {
        // Set cursor style on the marker's container
        const element = marker.element as HTMLElement;
        if (element) {
          element.style.cursor = 'pointer';
        }
        markerRef.current = marker;
        setMarkerRef(marker, entry.id);
      }
    },
    [setMarkerRef, entry.id]
  );

  useEffect(() => {
    const marker = markerRef.current;
    if (marker) {
      marker.addListener('click', handleClick);
      return () => {
        google.maps.event.clearListeners(marker, 'click');
      };
    }
  }, [handleClick]);

  return (
    <AdvancedMarker
      position={entry.location.geometry.location}
      ref={ref}
      title={entry.locationName}
    >
      <div style={{ cursor: 'pointer' }}>
        <FiMapPin color="#0E70F1" fill="white" size={40} />
      </div>
    </AdvancedMarker>
  );
};

and

import { Stack, Text } from '@chakra-ui/react';
import { MarkerClusterer } from '@googlemaps/markerclusterer';
import { InfoWindow, useMap } from '@vis.gl/react-google-maps';
import { useCallback, useEffect, useMemo, useState } from 'react';

import { Button } from '@/components/ui/button';

import { Entry, MAP_ID } from '../types';
import { EntryMarker } from './MapMarker';

interface Props {
  data: Entry[];
}

export const LocationMarkers = ({ data }: Props) => {
  const [markers, setMarkers] = useState<{
    [key: string]: google.maps.marker.AdvancedMarkerElement
  }>({});
  const [selectedMarkerKey, setSelectedMarkerKey] = useState<Entry | null>(
    null
  );

  const map = useMap(MAP_ID);
  const clusterer = useMemo(() => {
    if (!map) return null;

    return new MarkerClusterer({
      map,
      renderer: {
        render: ({ count, position, markers = [] }) => {
          const element = document.createElement('div');
          element.innerHTML = String(count);
          element.style.color = '#ffffff';
          element.style.fontSize = '14px';
          element.style.width = `${Math.max(count * 4, 40)}px`;
          element.style.height = `${Math.max(count * 4, 40)}px`;
          element.style.background = '#1A365D';
          element.style.border = '2px solid #0E70F1';
          element.style.borderRadius = '50%';
          element.style.display = 'flex';
          element.style.justifyContent = 'center';
          element.style.alignItems = 'center';

          const marker = new google.maps.marker.AdvancedMarkerElement({
            position,
            content: element,
            zIndex: 1000 + count
          });

          if (count > 1) {
            marker.addListener('gmp-click', () => {
              const bounds = new google.maps.LatLngBounds();
              markers.forEach((m) => {
                const position = (
                  m as unknown as google.maps.marker.AdvancedMarkerElement
                ).position;
                if (position) {
                  bounds.extend(position);
                }
              });
              map.fitBounds(bounds, {
                bottom: window.innerHeight * 0.32,
                left: 0,
                right: 0,
                top: window.innerHeight * 0.125
              });
            });
          }

          return marker;
        }
      }
    });
  }, [map]);

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

    clusterer.clearMarkers();
    clusterer.addMarkers(Object.values(markers));
  }, [clusterer, markers]);

  // this callback will effectively get passsed as ref to the markers to keep
  // tracks of markers currently on the map
  const setMarkerRef = useCallback(
    (marker: google.maps.marker.AdvancedMarkerElement | null, key: string) => {
      setMarkers((markers) => {
        if ((marker && markers[key]) || (!marker && !markers[key]))
          return markers;

        if (marker) {
          return { ...markers, [key]: marker };
        } else {
          const { [key]: _, ...newMarkers } = markers;

          return newMarkers;
        }
      });
    },
    []
  );

  const handleInfoWindowClose = useCallback(() => {
    setSelectedMarkerKey(null);
  }, []);

  const handleMarkerClick = useCallback((entry: Entry) => {
    setSelectedMarkerKey(entry);
  }, []);

  return (
    <>
      {data.map((entry) => (
        <EntryMarker
          entry={entry}
          key={entry.id}
          onClick={handleMarkerClick}
          setMarkerRef={setMarkerRef}
        />
      ))}

      {selectedMarkerKey && (
        <InfoWindow
          anchor={markers[selectedMarkerKey.id]}
          onCloseClick={handleInfoWindowClose}
        >
          <Stack>
            <Text color="dark" fontSize="16px" fontWeight="bold">
              {selectedMarkerKey.locationName}:{' '}
              {new Date(selectedMarkerKey.createdAt).toLocaleDateString(
                'en-US',
                { month: 'numeric', day: 'numeric', year: '2-digit' }
              )}
            </Text>
            <Button colorScheme="brand" variant="outline">
              View Details
            </Button>
          </Stack>
        </InfoWindow>
      )}
    </>
  );
};

It's probably not perfect but i think it works fine...

[febLey]

Thanks you for your help.

I managed figure out the issue in my specific case, I have some entries that don't have any coordinates, so the position on the AdvancedMarker is undefined. Apparently that breaks the clustering.

I've put the position into a useMemo and check for it while rendering

export const EntryMarker = (props: EntryMarkerProps) => {
  const { entry, onClick, setMarkerRef } = props;

  const position = useMemo(() => {
    if (entry.fields.coordinates) {
      const { lat, lon: lng } = entry.fields.coordinates;

      if (lat && lng) return new google.maps.LatLng(lat, lng);
    }
  }, [entry]);

  const handleClick = useCallback(() => onClick(entry), [onClick, entry]);

  const ref = useCallback(
    (marker: google.maps.marker.AdvancedMarkerElement) =>
      setMarkerRef(marker, entry.sys.id),
    [setMarkerRef, entry.sys.id],
  );

  return position ? (
    <AdvancedMarker position={position} ref={ref} onClick={handleClick}>
      <Image
        src={'/images/map-marker.svg'}
        width={32}
        height={32}
        alt={entry.fields.title || ''}
      />
    </AdvancedMarker>
  ) : null;
};