AdvancedMarker Clustering Styling

[chris-iliopoulos]

Hi all! Well as the title suggests, I want to stylize the cluster icon, and having practically followed the marker-clustering example of this library (https://github.com/visgl/react-google-maps/blob/9c59d2e47066dbcc70f04574d6a157c6b5981c7c/examples/marker-clustering/src/app.tsx) I have hit a wall regarding the stylizing of the clusterer. I am trying to add an icon to the marker that I want to use as the clusterer icon when I'm creating the MarkerClusterer instance but I don't see anything on the map.

Here's a code segment that may help...

    if (!clusterer.current) {
      clusterer.current = new MarkerClusterer({
        map,
        renderer: {
          render: ({ count, position }) =>
            new google.maps.Marker({
              map,
              position,
              label: { text: String(count), color: "#ff821f", fontSize: "100px" }
              icon: clusterIconOptions as google.maps.Icon,
            })
        }
      });
    }
    
  const clusterIconOptions = {
    url: CustomMarkerIcon.src, // which I am importing from a local src
    scaledSize: { width: 25, height: 40 }
};

Any help or pointers would be appreciated!

[chris-iliopoulos]

Found my way through it ... the problem was mostly the map and the icon

[bartbergmans]

How did you manage to do it?

[bartbergmans]

Nevermind, I got the result by doing this:

      if (!map) return;
      if (!clusterer.current) {
        clusterer.current = new MarkerClusterer({
          map,
          renderer: {
            render: ({ count, position }) => {
              const contentElement = document.createElement("div");
              contentElement.innerHTML = `<p>` + count + `</p>`;

              return new google.maps.marker.AdvancedMarkerElement({
                content: contentElement,
                map: map,
                position: position,
              });
            },
          },
        });
      }
    }, [map]);```

[chris-iliopoulos]

I did it like this for the clustering and I used the AdvancedMarkers another way...

      const clusterIconOptionsWithAnchor = {
        ...clusterIconOptions,
        anchor: new google.maps.Point(20, 50)
      };

      clusterer.current = new MarkerClusterer({
        map,
        renderer: {
          render: ({ count, position }) => {
            return new google.maps.Marker({
              position: position,
              label: markerLabelOptions(count) as google.maps.MarkerLabel,
              zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
              icon: clusterIconOptionsWithAnchor as google.maps.Icon | google.maps.Symbol
            });
          }
        }
      });