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) {
          $(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?


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/

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.