Question

I wonder whether someone may be able to help me please.

I’m using the following page, here to allow the user to view markers of their chosen criteria with the results listed in a sidebar on the left hand side. What I’m trying to do is to make the marker, either chosen via the sidebar or on the map to bounce, with the marker ceasing to bounce once another is selected.

I can get the marker to bounce both from the sidebar and from the marker on the map, but I can’t find a way to stop the marker bouncing once another has been selected. I’ve looked through the threads on this site and on various other tutorials but I can’t find anything that tells me how to move the ‘bouncing’ functionality from one marker to the other.

I just wondered whether someone could someone perhaps take a look at this please and let me know where I’ve gone wrong.

Many thanks and kind regards

Answer 1

To stop the marker from bouncing, all you need to do is to call marker.setAnimation(null).

A sample solution for situations where you want at most one marker bouncing and repeated clicks on the same marker to be toggling the bouncing:

Create some global variable where you remember currently bouncing marker:

var bouncingMarker = null;

Create a click listener, which checks if a marker is bouncing and makes all the necessary animation toggling.

var clickListener = function() {
    if(bouncingMarker)
        bouncingMarker.setAnimation(null);
    if(bouncingMarker != this) {
        this.setAnimation(google.maps.Animation.BOUNCE);
        bouncingMarker = this;
    } else
        bouncingMarker = null;
}

Add the listener to all the markers you want to have the behaviour:

google.maps.event.addListener(marker, 'click', clickListener);