My quick-and-dirty approach does not involve a ton of research :(

Here's the demo: http://jsfiddle.net/yV6xv/4/ Click on a marker to begin moving it, after it stops, you can click again to go back to its initial point. Clicking while in motion gives strange results.

Start and endpoints are predefined in initialize(). The animation is defined by dividing the start and endpoints into 100 segments, and placing the marker at these points with a set interval. So the animation time is fixed: markers travel longer distances faster than shorter distances.

I didn't do much testing, I know clicking on a moving marker will give unexpected results (start and endpoints get misplaced)

This is the interesting part of the demo:

      // store a LatLng for each step of the animation

      frames = [];

      for (var percent = 0; percent < 1; percent += 0.01) {

        curLat = fromLat + percent * (toLat - fromLat);

        curLng = fromLng + percent * (toLng - fromLng);

        frames.push(new google.maps.LatLng(curLat, curLng));

      }



      move = function(marker, latlngs, index, wait, newDestination) {

        marker.setPosition(latlngs[index]);

        if(index != latlngs.length-1) {

          // call the next frame of the animation

          setTimeout(function() { 

            move(marker, latlngs, index+1, wait, newDestination); 

          }, wait);

        }

        else {

          // assign new route

          marker.position = marker.destination;

          marker.destination = newDestination;

        }

      }



      // begin animation, send back to origin after completion

      move(marker, frames, 0, 20, marker.position);