How to animate a marker smoothly with Google Maps?

Question

I've written a small algorithm that animates markers' movement from one point to another. The algorithm looks like this in pseudocode:

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

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

The problem I have run into is that when the map is zoomed out, the animation seems to "zig zag". That being said, when you zoom in, the animation is much smoother.

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

Of course, the current implementation is just fine when the map is zoomed in but not so good when it's zoomed out.

Is there any way around this problem?

Sudhir Jonathan Sudhir Jonathan · Accepted Answer · 2010-10-02T09:15:04

Yes... the api gives you methods to get the pixel co-ords of all your markers on the map. I'd do the following:

get the pixel co-ords of your marker

render a dummy marker on that spot

remove the original marker

animate your dummy to the new spot using pixel values

place a new map marker on the spot

remove the dummy

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

How to animate a marker smoothly with Google Maps?

1 Answers