[GIS] How to animate Markercluster Icons

animationgoogle mapsjquerymarkers

I am using Jquery Google Map V3 with markerclusterplus. I want to animate a cluster icon when hover the icon. My Clusterhover event code is,

var mc = new MarkerClusterer(map, markersarray,mcOptions);
    google.maps.event.addListener(mc, "mouseover", function (c) {
          console.log(this);
          $(this).effect( 'bounce', { times: 3 }, 'slow');
          //$("div.cluster").effect( 'bounce', { times: 3 }, 'slow');

    });

But I am facing following error,

Uncaught TypeError: $(...).effect is not a function(anonymous function) @ groupmap.html:309S.trigger @ main.js:20(anonymous function) @ markercluster.js:186

How do I achieve this?

Best Answer

From looking at the c variable in my browser's developer tools, I found that the actual HTML element you want your effect on is c.clusterIcon_.div_. Your google.maps.event.addListener function should then look like this:

google.maps.event.addListener(markerCluster, "mouseover", function (c) {
    $(c.clusterIcon_.div_).effect( 'bounce', { times: 3 }, 'slow');
});

Your error message indicates that you have not added the jQuery UI javascript files in your code, or you placed them too far at the bottom. It should be included before you call any jQuery UI functions like effect.

Here is a working JSFiddle demo: http://jsfiddle.net/k65qkhbL/1/

Related Question