Set Marker Cluster Icon Depending On Markers Inside It

I've put together a map with clusters. The idea 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 i

Solution 1:

One of your issues is your calculator function. You want it to return "red" if there are any red markers in the cluster, yellow if there are any yellow markers but no red ones, and blue otherwise. Write the code to do that:

// match cluster icon to markersvar calc = function(markers, numStyles) {
    // default to bluevar highestPriorityColor = 1;
    for (var i = 0; i < markers.length; i++) {
        if (markers[i].getIcon().indexOf("red.png") > -1) {
            // if any markers are red, will be red, can return resultreturn {text: markers.length, index: 3}; // index of red
        } elseif (markers[i].getIcon().indexOf("yellow.png") > -1) {
            // if any markers are yellow, update it to yellow if it is blueif (highestPriorityColor < 2)
                highestPriorityColor = 2; // index of yellow
        } /* else if (markers[i].getIcon().indexOf("green.png") > -1) {
            // ignore green markers (leave it whatever color it is, defaults to blue)
        } */
    }
    // return result once complete processing all the markersreturn {text: markers.length, index: highestPriorityColor}; // index of chosen cluster
}

zoomed out

zoom in

zoom in on red "17" cluster

code snippet:

functioninitMap() {
  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 markersfor (var i = 0; i < 50; 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 < 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 < 5; 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 markersvar calc = function(markers, numStyles) {
    // default to bluevar highestPriorityColor = 1;
    for (var i = 0; i < markers.length; i++) {
      if (markers[i].getIcon().indexOf("red.png") > -1) {
        // if any markers are red, will be red, can return resultreturn {
          text: markers.length,
          index: 3
        }; // index of red
      } elseif (markers[i].getIcon().indexOf("yellow.png") > -1) {
        // if any markers are yellow, update it to yellow if it is blueif (highestPriorityColor < 2)
          highestPriorityColor = 2; // index of yellow
      }
      /* else if (markers[i].getIcon().indexOf("green.png") > -1) {
                 // ignore green markers (leave it whatever color it is, defaults to blue)
             } */
    }
    // return result once complete processing all the markersreturn {
      text: markers.length,
      index: highestPriorityColor
    }; // index of chosen cluster
  }

  // define cluster iconsvar 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: 60,
        url: "https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/gh-pages/images/m2.png",
        width: 60
      },
      {
        height: 70,
        url: "https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/gh-pages/images/m3.png",
        width: 70
      }
    ]
  };
  var markerCluster = newMarkerClusterer(map, markers, mcOptions);
  markerCluster.setCalculator(calc);
}

#map {
  height: 80%;
}


/* Optional: Makes the sample page fill the window. */html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<scriptdefersrc="https://maps.googleapis.com/maps/api/js?v=3.42&key=AIzaSyA4PP1O36qWCzer8K3VFyjf0uxRs4WVNFo&callback=initMap"></script><scriptsrc="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script><divid="map"></div>