What I finally tried and seems to have worked, was to use a call to move the marker wrapped in closure called by a setTimeout(). The following code is a template that you can use to implemented bouncy markers in your application.
var bounceInProgress = false;
var myMap; // this has been set prior to call
function bounceMarker(marker)
{
if (! bounceInProgress)
{
var point =
myMap.fromLatLngToContainerPixel(marker.getLatLng());
bounceInProgress = true;
myMap.disableDoubleClickZoom();
myMap.disableDragging();
bounceMarkerMove(marker, point, -10, -1);
}
}
function bounceMarkerMove(marker, point, i, direction)
{
if (i <= 10)
{
direction = (i == 0) ? 0 : direction = i/Math.abs(i);
point.y += direction;
marker.setLatLng(myMap.fromContainerPixelToLatLng(point));
markerNextMove = function () { bounceMarkerMove(marker,
point,
i + 1,
direction); };
setTimeout("markerNextMove()", 15);
}
else
{
myMap.enableDoubleClickZoom();
myMap.enableDragging();
bounceInProgress = false;
}
}
To see this template in action, check out this page, http://www.abaq.us/geo/pub/glog/john there you will see bouncy icons on the map. Select another map from the list that has a marker if the default map doesn't have one, and click it to see the marker bounce. Check out the code of the page to see it implemented in situ. I've also implemented it in the GWT as well.
