JS Google Maps API v3 Animate Marker Between Coordinates

Question

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?

Answer 1

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);

Answer 2

You can use marker-animate-unobtrusive library to make markers smoothly transition from one location to another.

You could initialize your marker like that:

var marker = new SlidingMarker({
   //your original marker options
   //...
   duration: 1000
});

With this defined, your marker will smoothly move to a new position within 1 second, just call marker.setPosition().

If you want to animate marker back-and-forth, just toggle setPosition each second.

setTimeout(function() {
   var newPosition = /* select new position */
   marker.setPosition(newPosition)
}, 1000);

P.S. I'm the author of the library.