javascript - JS Google Maps API v3 Animate Marker Between Coordinates -

i have simple javascript maps application i'm working on requires me animate movement of multiple markers between different coords. each marker free move on own , markers stored in array list. however, have been having trouble getting them smoothly transition locations.

i've done ton of research , trial/error no luck, have luck this?

my quick-and-dirty approach not involve ton of research :(

here's demo: http://jsfiddle.net/yv6xv/4/ click on marker begin moving it, after stops, can click again go initial point. clicking while in motion gives strange results.

start , endpoints predefined in initialize(). animation defined dividing start , endpoints 100 segments, , placing marker @ these points set interval. animation time fixed: markers travel longer distances "faster" shorter distances.

i didn't testing, know clicking on moving marker give unexpected results (start , endpoints misplaced)

this "interesting" part of demo:

      // store latlng each step of animation       frames = [];       (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 next "frame" of 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 origin after completion       move(marker, frames, 0, 20, marker.position);