How to animate marker smoothly using Google Maps?

Question

I wrote a small algorithm that animates the movement of markers from one point to another. The algorithm looks like a pseudo-code:

lat_delta = new_lat - old_lat;
lng_delta = new_lng - old_lng;

for(alpha=0; alpha < 1; alpha += 0.1) {
  lat = old_lat + (alpha * lat_delta);
  lng = old_lng + (alpha * lng_delta);
  update_marker(lat, lng);
}

Full code is available at http://dev.syskall.com/map/ and http://dev.syskall.com/map/commute.js .

The problem I am facing is that when the map is scaled down, the animation seems to be zigzag. However, when you zoom in, the animation is much smoother.

I believe that this may be due to the fact that my animation is based on lat, lng, not pixels on the screen. When you zoom out, Google Maps is not as accurate and should somehow round the position.

Of course, the current implementation is just perfect when the map is enlarged, but not so good when it is reduced.

Is there any way to solve this problem?

Answer 1

Yes ... api gives you methods to get the pixel coordinates of all your markers on the map. I would do the following:

get the pixel coordinates of your marker

visualize a dummy marker at that location

remove source marker

spice up your mannequin in a new place using pixel values

put the new map marker in place

remove dummy

At the beginning and at the end, you can use api to get latlng from pixels and vice versa.