Default image path for clusterer no longer works

[dylantf]

It appears Google has moved or removed the location of (most of?) the clustering icons from their documentation, so consequently most clusters show up as broken images.

[NeftaliRJ]

I have the same issue. Apparently Google pushed the modern @googlemaps/markerclusterer, which doesn’t use PNG sprites for clusters anymore. The recommendation is to move to the new package: npm i @googlemaps/markerclusterer

If you want the minimum change to get things working right now (and keep using the legacy clusterer), just set the icon options and host the images in your project:

// with @react-google-maps/api's legacy MarkerClusterer
const clustererOptions = {
  maxZoom: 14,
  minimumClusterSize: 3,
  gridSize: 60,
  zoomOnClick: true,
  averageCenter: true,

  // fix: point to your hosted sprites
  imagePath: '/images/cluster/m', // will request m1.png ... m5.png
  imageExtension: 'png',
};

For a Next.js app, place the files here so they’re served at /images/cluster/m1.png … /images/cluster/m5.png:

/public
  /images
    /cluster
      m1.png
      m2.png
      m3.png
      m4.png
      m5.png

You can grab the default m1.png … m5.png from the archived repo and host them yourself.

[hamez0r]

@NeftaliRJ I tried your solution and I don't get what's wrong here

            <MarkerClusterer
              imagePath="http://localhost:3100/markers/m"
              imageExtension="png"
            >
              {(clusterer) => {
                return (
                  <Markers clusterer={clusterer} positions={validPositions} />
                );
              }}
            </MarkerClusterer>

In that Markers component I log the image path and it's the localhost one, but the requests are made to google. Any ideas?

[dylantf]

@NeftaliRJ I tried your solution and I don't get what's wrong here

        <MarkerClusterer
          imagePath="http://localhost:3100/markers/m"
          imageExtension="png"
        >
          {(clusterer) => {
            return (
              <Markers clusterer={clusterer} positions={validPositions} />
            );
          }}
        </MarkerClusterer>

In that Markers component I log the image path and it's the localhost one, but the requests are made to google. Any ideas?

Does it work if you put those keys into the options prop? I believe that's what I had to do, it seemed to ignore the other props.

[hamez0r]

@NeftaliRJ I tried your solution and I don't get what's wrong here

        <MarkerClusterer
          imagePath="http://localhost:3100/markers/m"
          imageExtension="png"
        >
          {(clusterer) => {
            return (
              <Markers clusterer={clusterer} positions={validPositions} />
            );
          }}
        </MarkerClusterer>

In that Markers component I log the image path and it's the localhost one, but the requests are made to google. Any ideas?

Does it work if you put those keys into the options prop? I believe that's what I had to do, it seemed to ignore the other props.

YES! thanks a lot!

[Camiloadh99]

Google delete those photos :(

But this could be usefull for you. you can create a new component creating the images for the cluster that you need, and change any MarkerClusterer with this

import { MarkerClusterer } from "@react-google-maps/api";
import React from "react";

const createClusterIcon = (size: "small" | "medium" | "large") => {
  const sizeConfig = {
    small: { width: 40, height: 40, fontSize: 12, color: "#1976d2" },
    medium: { width: 50, height: 50, fontSize: 14, color: "#d19805" },
    large: { width: 60, height: 60, fontSize: 16, color: "#ef5350" },
  };

  const config = sizeConfig[size];

  const svg = `
    <svg width="${config.width}" height="${config.height}" viewBox="0 0 ${config.width} ${
    config.height
  }" xmlns="http://www.w3.org/2000/svg">
      <circle cx="${config.width / 2}" cy="${config.height / 2}" r="${config.width / 2 - 2}" 
              fill="${config.color}" stroke="#ffffff" stroke-width="2" opacity="0.9"/>
    </svg>
  `;

  return `data:image/svg+xml;base64,${btoa(svg)}`;
};


const clusterStyles = [
  {
    url: createClusterIcon("small"),
    height: 40,
    width: 40,
    textColor: "#ffffff",
    textSize: 12,
    fontFamily: "Roboto, sans-serif",
    fontWeight: "bold",
  },
  {
    url: createClusterIcon("medium"),
    height: 50,
    width: 50,
    textColor: "#ffffff",
    textSize: 14,
    fontFamily: "Roboto, sans-serif",
    fontWeight: "bold",
  },
  {
    url: createClusterIcon("large"),
    height: 60,
    width: 60,
    textColor: "#ffffff",
    textSize: 16,
    fontFamily: "Roboto, sans-serif",
    fontWeight: "bold",
  },
];

const clusterOptions = {
  styles: clusterStyles,
  minimumClusterSize: 3,
  maxZoom: 15,
  gridSize: 60,
  averageCenter: true,
  zoomOnClick: true,
};

interface ClusterCustomProps {
  children: (clusterer: any) => React.ReactElement;
}

export default function ClusterCustom({ children }: ClusterCustomProps) {
  return <MarkerClusterer options={clusterOptions}>{children}</MarkerClusterer>;
}

[hamez0r]

The images are still there - https://github.com/googlearchive/js-marker-clusterer/blob/gh-pages/images/m1.png