title: set marker cluster icon depending on markers inside it
body: <p>I've put together a map with clusters. The <a href="https://stackoverflow.com/questions/27375173/markerclusterer-set-marker-cluster-icon-depending-on-markers-inside-it">idea</a> was that cluster's color should depend on the color of markers inside: if there is a red marker, cluster is red; no red, but there is a yellow marker, cluster is yellow; no red and yellow markers, cluster is blue.</p>
  <p>This only works as expected at specific zoom levels. Fully zoomed out it shows blue cluster, however there are red markers in there, so I expect a red cluster. When I start to zoom in and the map shows multiple clusters, most look right, but in some instances this offending behavior repeats, it will group red/yellow/blue markers into blue cluster, I expect red. Same with Yellow + Blue  markers should form a yellow cluster, not blue.</p>
  <p>According to <a href="https://nooshu.github.io/blog/2012/10/03/marker-cluster-calculator-for-google-maps-v3/" rel="nofollow noreferrer">this</a> setCalculator function runs for each cluster individually, therefore I was expecting consistent behavior, but instead we have mixed results.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    function initMap() {
          var map = new google.maps.Map(document.getElementById('map'), {
              center: new google.maps.LatLng(51, 4),
              zoom:6,
              mapTypeControlOptions:"roadmap"
          });
  
          var markers = [];
  
          // make random red, yellow, blue markers
          for (var i = 0; i &lt; 20; i++) {
              var latLng = new google.maps.LatLng(51.11 - Math.random(), 4.11 - Math.random());
              var marker = new google.maps.Marker({
                  position: latLng, 
                  icon: 'http://maps.google.com/mapfiles/ms/micons/green.png',
                  label: i,
                  map: map
              });
              markers.push(marker);
          }
          for (var i = 0; i &lt; 20; i++) {
              var latLng = new google.maps.LatLng(51.11 - Math.random(),4.11 - Math.random());
              var marker = new google.maps.Marker({
                  position: latLng, 
                  icon: 'http://maps.google.com/mapfiles/ms/micons/yellow.png',
                  label: i,
                  map: map
              });
              markers.push(marker);
          }
          for (var i = 0; i &lt; 20; i++) {
              var latLng = new google.maps.LatLng(51.11 - Math.random(),4.11 - Math.random());
              var marker = new google.maps.Marker({
                  position: latLng, 
                  icon: 'http://maps.google.com/mapfiles/ms/micons/red.png',
                  label: i,
                  map: map
              });
              markers.push(marker);
          }
  
          // match cluster icon to markers
          var calc = function(markers, numStyles) {
              for (var i = 0; i &lt; markers.length; i++) {
                  if (markers[i].getIcon().indexOf("red.png") &gt; -1) {
                      return {text: markers.length, index: 3}; // index of red
                  }else if (markers[i].getIcon().indexOf("yellow.png") &gt; -1) {
                  return {text: markers.length, index: 2}; // index of yellow
                  }else if (markers[i].getIcon().indexOf("green.png") &gt; -1) {
                      return {text: markers.length, index: 1};// index of blue
                  }
              }
          }
  
          // define cluster icons
          var mcOptions = {gridSize: 50, maxZoom: 15, styles: [{
                  height: 50,
                  url: "https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/gh-pages/images/m1.png",
                  width: 50
              },
              {
                  height: 50,
                  url: "https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/gh-pages/images/m2.png",
                  width: 50
              },
              {
                  height: 50,
                  url: "https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/gh-pages/images/m3.png",
                  width: 50
              }]
          };
          var markerCluster = new MarkerClusterer(map, markers, mcOptions);
          markerCluster.setCalculator(calc);
      }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    #map {
              height: 80%;
            }
            /* Optional: Makes the sample page fill the window. */
            html, body {
              height: 100%;
              margin: 0;
              padding: 0;
            }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;script defer src="https://maps.googleapis.com/maps/api/js?v=3.42&amp;key=AIzaSyA4PP1O36qWCzer8K3VFyjf0uxRs4WVNFo&amp;callback=initMap"&gt;&lt;/script&gt;
      &lt;script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"&gt;&lt;/script&gt;
  
      &lt;div id="map"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>UPDATE: changed marker icons to be more distinguishable from cluster icons.</p>