I use JSON data to create hundreds of markers using google api v3 maps. I used Markerclusterer and it works great. It seems that Markerclusterer defaults to assigning cluster icons based on different zoom levels. What I want to do is set up an individual cluster style based on the if condition on the data received by the json array. I tried the following logic, but it changes the style of all clusters, not a specific one containing a specific marker.
if(redflag) { var mcOptions = { gridSize: 50, maxZoom: 15, styles: [{ height: 57, url: "../../css/images/m3.png", width: 57 } ] }; } else { mcOptions = { gridSize: 50, maxZoom: 15, styles: [{ height: 53, url: "../../css/images/m1.png", width: 53 }] }; } var mc = new MarkerClusterer(map, [], mcOptions); mc.addMarkers(markerArray , true);
How to set up individual clusters using my own condition and not indexing by default with the markerclusterer object.
Edit 1: I changed the code to track the marker using the marker_ and getClusters () labels and managed to change the style of the cluster icon, but the clusters go out of communication and do not show the correct icon change when scaling. I used this animation cluster link.
var mc = new MarkerClusterer(map, [], mcOptions); mc.addMarkers(markerArray , true); //attach listener to clusteringend-event google.maps.event.addListener(mc,'clusteringend',function() { //iterate over all clusters var clusters=this.getClusters(); for(var i = 0; i < clusters.length;++i) { if(clusters[i].markers_.length > 1) { var markers= clusters[i].markers_; var flag=false; for(var j=0;j<markers.length;++j) { if(markers[j].getAnimation()!= null) { alert("marker posotion"+markers[j].getPosition().toString()); flag=true; } } if(flag) clusters[i].clusterIcon_.div_.firstChild.src='../../css/images/m3.png'; } } });
source share