title: Markerclusterer set marker cluster icon depending on markers inside it
body: <p>Let's say that I want to make a webpage that will show approximate number of free parking spots left on each parking(due to confidentiality I'm not allowed to give any details of what I'm actually doing). For this I'm using <em>Google maps</em> and <em>Markerclusterer</em>. So for parking with less than 5% spots left I'd like to show a red marker, for parkings with 5%-25% spots I'd show a yellow one and for ones with more than 25% free spots I want to make it green. So far I could make those markers and cluster them, but here's the tricky part(and question itself):</p>
  
  <p><strong>How can I make a cluster icon dependant on the markers inside it?</strong></p>
  
  <p>For example:</p>
  
  <ul>
  <li>Parking A is green</li>
  <li>Parking B is red</li>
  <li>Parking C is green</li>
  <li>Parking D is yellow</li>
  </ul>
  
  <p>When zoomed out I want to show the cluster that has all 4 of them red(worst of all). When zoomed in I'd get 2 clusters(A+B and C+D). I want the first cluster(A+B) to be red and second(C+D) should be yellow.</p>
  
  <p>What I did so far:</p>
  
  <pre><code>var mcOptions = {gridSize: 50, maxZoom: 15, styles: [{
      height: 46,
      url: "///Users/Novarg/Downloads/foundation-5.4.7/img/greenC.png",
      width: 46
    },
    {
      height: 46,
      url: "///Users/Novarg/Downloads/foundation-5.4.7/img/redC.png",
      width: 46
    }]};
    var markers = [];
    for (var i = 0; i &lt; 100; i++) {
      var latLng = new google.maps.LatLng(51 + Math.random(),
        4 + Math.random());
      var marker = new google.maps.Marker({'position': latLng, icon: 'img/greenP.png'});
      markers.push(marker);
    }
    for (var i = 0; i &lt; 20; i++) {
      var latLng = new google.maps.LatLng(51 - Math.random(),
        4 - Math.random());
      var marker = new google.maps.Marker({'position': latLng, icon: 'img/redP.png'});
      markers.push(marker);
    }
    var markerCluster = new MarkerClusterer(map, markers, mcOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>
  
  <p>Right now I only have red and green markers, which should be enough to test it. But behaviour of this cluster now is as follows:</p>
  
  <ul>
  <li>All clusters with less than 10 markers in it are green</li>
  <li>All clusters with more than 9 markers in it are red</li>
  </ul>
  
  <p><strong>EDIT</strong></p>
  
  <p>From <a href="http://a32.me/2012/05/handling-huge-amount-of-markers-on-google-maps-with-clusters/" rel="noreferrer">this link</a> I found that what I might need is <em><a href="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/docs/reference.html#ClusterIconInfo" rel="noreferrer">Calculator</a></em>. So I tried it, but still no luck(although I think that I'm getting closer. Actually, I hope I'm very close to the solution right now). </p>
  
  <p>So I tried to change my options:</p>
  
  <pre><code>var mcOptions = {gridSize: 50, maxZoom: 15, styles: [{
    height: 46,
    url: "///Users/Novarg/Downloads/foundation-5.4.7/img/greenC.png",
    width: 46
  },
  {
    height: 46,
    url: "///Users/Novarg/Downloads/foundation-5.4.7/img/redC.png",
    width: 46
  }],
  calculator: function(markers, numStyles) {
    for (var i = 0; i &lt; markers.length; i++) {
      if (markers[i].getIcon().indexOf("redP.png") &gt; -1) {
        return {text: markers.length, index: 1};
      }
    }
    return {text: markers.length, index: 0};
  }
  };
  </code></pre>
  
  <p>But the <em>Calculator</em> is never being used. I tested it by putting a simple <code>alert('test');</code> inside it.</p>
  
  <p>I hope this additional info will help you to help me find a solution.</p>