51

I am using the MarkerCluster.js to create clustering in my google maps api. The clusters work how I want them however I want to style differently than yellow, blue and red circles. I was trying to use the MarkerStyleOptions and it says you have an array of styles with the smallest cluster icon first and the biggest last. I tried to create this below but I am getting really confused about what syntax to use and can't find any good examples.

var clusterStyles = [
    [opt_textColor: 'white'],
    [opt_textColor: 'white'],
    [opt_textColor: 'white']
];

var mcOptions = {
    gridSize: 50,
    styles: clusterStyles,
    maxZoom: 15
};
var markerclusterer = new MarkerClusterer(map, cluster, mcOptions);
1
  • this is totally wrong, even the syntax of the arrays inside the variable
    – showtime
    Commented Feb 19, 2021 at 19:42

5 Answers 5

103

What you need to do is use the url to specify which images to use instead of the blue/yellow/red images currently being used. And probably a good idea to include the height and width options too.

var clusterStyles = [
  {
    textColor: 'white',
    url: 'path/to/smallclusterimage.png',
    height: 50,
    width: 50
  },
 {
    textColor: 'white',
    url: 'path/to/mediumclusterimage.png',
    height: 50,
    width: 50
  },
 {
    textColor: 'white',
    url: 'path/to/largeclusterimage.png',
    height: 50,
    width: 50
  }
];
7
  • 1
    Hi Thankyou, :) Yes I used this and it worked really well, I knew I was just getting the way you write the array wrong. One more thing is there any way of having html markup of say a <div> box with a h2 and p tag, instead of a static image? Commented Oct 20, 2011 at 13:39
  • Duncan, do you know if it is possible to use an icon instead of an image url? I mean an icon constructed with google.maps.SymbolPath.CIRCLE, filColor etc.
    – Michiel
    Commented Nov 14, 2013 at 15:17
  • According to the comments in the JS file here that isn't possible, it just expects a URL
    – duncan
    Commented Nov 14, 2013 at 16:40
  • It's textColor, not opt_textColor. Commented Jun 2, 2014 at 14:49
  • 1
    @Emre yes exactly. Look at the example here, and change the Cluster Style and look at their JS to see how they've done it: googlemaps.github.io/js-marker-clusterer/examples/…
    – duncan
    Commented Jun 1, 2016 at 22:04
5

It's never too late to post a rather helpful answer, so additionally you can look through the whole MarkerClusterer Documentation for IconStyle

UPDATE

There's also google maps v3 utility on github as stated by ehcanadian

6
4

You can now pass your own renderer to your MarkerClusterer Object which returns a google.maps.Marker like this:

const renderer = {
    render({ count, position }) {
        return new google.maps.Marker({
            label: { text: String(count), color: "white", fontSize: "10px" },
            position,
            // adjust zIndex to be above other markers
            zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
        });
    }
}

// use this if you use NPM version
const markerCluster = new MarkerClusterer({ map, markers, renderer });

// Use this if you use the CDN version
// const markerCluster = new  markerClusterer.MarkerClusterer({ markers, map , renderer});

Inside the render method, you can customize the cluster maker the same way you would customize normal marker. See https://developers.google.com/maps/documentation/javascript/custom-markers for more details. For example, if you just want to add a specific icon.png you could do it like this:

const icon = {
            url: '/path/to/your/icon.png',
            scaledSize: new google.maps.Size(50, 50),
};

const renderer = {
                render({ count, position }) {
                    return new google.maps.Marker({
                        label: { text: String(count), color: "white", fontSize: "10px" },
                        position,
                        icon,
                        // adjust zIndex to be above other markers
                        zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
                    });
                }
            }

You can also find some clustor marker render example at https://googlemaps.github.io/js-markerclusterer/public/renderers/

See https://developers.google.com/maps/documentation/javascript/marker-clustering for a full example how to setup MarkerCluster.


History Details:

The MarkerCluster library has been rewritten in 2021. One goal was to change the render process. The cluster icon itself is now a google.maps.Marker and can thus be styled just as normal marker. The mcOptions in the constructor is gone.

The proposed design is to encapsulate the logic for clustering and rendering into interfaces that the developer can extend specifically algorithm and renderer. The algorithm computes the clusters and the renderer generates a google.maps.Marker to represent clusters instead of using a google.maps.OverlayView.

3

According to latest docs, renderer does the trick. It allows you to use a Marker w/all its styling options - see Marker documentation:

     new MarkerClusterer({
      renderer: {
        render: ({ markers, _position: position }) => {

          //here is where you return a Marker
          //and style it w/custom label/icon props
          return new google.maps.Marker({
            position: {
              lat: position.lat(),
              lng: position.lng(),
            },
            label: String(markers.length),
          });
        },
      },
      ...etc
    });
0

Adam, please correct your code: const renderer = { render: ({ count, position }) => new Marker ...

The following works fine:

const renderer = {
   render: ({ count, position }) =>
     new google.maps.Marker({
        icon: { url:"path_to_image_file" }, 
        label: { text: String(count), color: "white", fontSize: "10px" },
        position,
        // adjust zIndex to be above other markers
        zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
   }),
};

new markerClusterer.MarkerClusterer({
  map,
  markers,
  renderer,
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.