JS Google Maps API v3 Animate Marker Between Coordinates
animation, google-maps, google-maps-api-3, google-maps-markers, javascript
Solution
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);
Problem
I have a simple javascript maps application that I'm working on that requires me to animate the movement of multiple markers between different coords. Each marker is free to move on its own and all markers are stored in an array list. However, I have been having trouble getting them to smoothly transition locations. I've done a ton of research and trial/error but no luck, anyone have any luck with this?