Animate cluster of markerclusterer

Question

I am using Google Maps v3 with MarkerClustererPlus. Click for docs

I want to animate a cluster if a cluster contains a specific marker. The animation is quite easy if the marker is not inside a cluster.

  marker.setAnimation(google.maps.Animation.BOUNCE);

But i want to bounce the whole cluster-icon. I can get the cluster with:

  markerCluster.getClusters();

But how can i associate the cluster-div with my getClusters()-Array? I dont know which div belongs to which cluster from the getClusters()-function.

Answer 1

This is not possible via the documented methods/properties, but you may get access to these properties.

• Step #1: Each cluster has a markers_ -property, which is an array that contains all the markers of the cluster. Iterate over all clusters and check if the markers_-array contains the wanted marker

• Step #2: when you've found the cluster with the wanted marker, access the property clusterIcon_.div_ of the cluster, that's the element that represents the cluster-icon

  //attach listener to clusteringend-event
  google.maps.event.addListener(markerClustererInstance,'clusteringend',function(){
  
  //iterate over all clusters
  var clusters=this.getClusters();
  for(var i = 0; i < clusters.length;++i){
  
  if(clusters[i].markers_.length > 1 
        && clusters[i].clusterIcon_.div_){
  
          // clusters[i].clusterIcon_.div_ is the HTMLElement
          // that contains the wanted clusterIcon,
          // you should at first reset here recently applied changes
  
          if(clusters[i].markers_.indexOf(wantedMarker)>-1){
            //the marker has been found, do something with it
          } 
    }
  }});
  

  But Note: The cluster-icon is not a google.maps.Marker, you can't simply apply an animation as you may do it with a native marker. Furthermore: Animations that will modify the position of the cluster-icon (e.g. bounce) may interfere with the markerClusterer, I would suggest to use effects that can be applied via color-changes or changes of the background-image(the cluster-icons you see are the background-images of the div).