6

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.

chaosbohne
  • 2,454
  • 2
  • 22
  • 27

1 Answers1

8

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

Dr.Molle
  • 116,463
  • 16
  • 195
  • 201
  • I actually have a similar issue. I got my cluster animating by adding a class to its div_ (css3 animation). However, the issue arises when a user zoom in/out the animation stop because the clusters have been reset hence the added classes are gone. I've tried to keep track of the marker inside the cluster that I want to animate, then upon zoom which trigger 'clusteringend' I will re-add that class. However, that didn't work out... :( How can I prevent the animation from stopping after zoom in/out? – Stella Lie Feb 26 '14 at 13:54