Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Animate cluster of markerclusterer

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.

like image 708
chaosbohne Avatar asked Aug 26 '13 20:08

chaosbohne


1 Answers

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).

like image 132
Dr.Molle Avatar answered Oct 25 '22 19:10

Dr.Molle