Google Maps V3 with MarkerCluster changing the color rules

Question

Using Google Maps V3 with MarkerCluster, you can see three different types of colors when clusertering, based on how many is clustered toghter.

Problem: I want to change the rule from based on how many, to how serious the case is on that area, its also represented in the custom icons I use. The types im working with is green for a good running product, yellow for a warning and red for a bad product.

I want to be able to see the red color on the cluster icon if there is a bad product in there somewhere, and not at all based on the number..

Im using ASP.NET MVC3 with razor - that maybe could help.

Can this be done guys?

Answer 1

Let's assume:

• your cluster image files are in place and have indexes of 1-green; 2-yellow; 3-red;
• references to your marker icons (string|Icon|Symbol) are made available as properties of the object, markerIcons

var markerIcons = {
    'green': '...',
    'yellow': '...',
    'red': '...'
};

Then, you can control which cluster icons are displayed with a calculator function as follows :

var myClusterer = new MarkerClusterer(map, {
    ...,//options
});

mc.setCalculator(function(markers, numStyles) {
    var index = 1;//green
    loop:
    for(var i=0; i<markers.length; i++) {
        switch(markers[i].getIcon()) {
            case markerIcons.yellow:
                index = 2;//yellow
            break;
            case markerIcons.red:
                index = 3;//red
                break loop;
            break;
        }
    }
    var index = Math.min(index, numStyles);
    return {text:markers.length, index:index};
});

Answer 2

you need to change calculator function:

var mc = new MarkerClusterer(map);

mc.setCalculator(
    function(markers, numStyles) {
        return {text: markers.length, index: 8}; 
     }
 );

The function get list of markers and should return a pair : text label and the colour number.