Smooth Route Animation in Google Maps: panTo vs. setCenter

By Shahram Javey

In my first attempt to animate a route on Google Maps, I used the GMap2.setCenter method. This provided for a spotty animation:

This movie requires Adobe Flash for playback.


As the marker moved along the route, the background map (as you can see) would often not render. Changing to use GMap2.panTo instead of the GMap2.setCenter method fixed this problem and the flickering of the route problem that I was seeing on Safari.

This movie requires Adobe Flash for playback.

Now the route animation of the Sheldon Road Trail looks a lot better. So does other routes, e.g. the Pebble Beach route, Kenndey/Shannon/Hicks Roads route, or the Stevens Creek Reservoir route.

7 Responses to “Smooth Route Animation in Google Maps: panTo vs. setCenter”

  1. Swapnil Says:

    Well its look nice! But you haven’t provided the code. I am using maps and want to show route animation from one place to another. Tell me how I can do this please and if possible please mail me how you did this Please
    Thanks & Regards
    Swapnil

  2. sj Says:

    Hi Sawpnil, just view the Html code for any if the route link in the above blog entry. Ping me again if needed. Thanks.

  3. sven macolic Says:

    hello.
    can you provide the function which call centerMap() function?
    thanx in advance!

  4. sj Says:

    Hi Sven,

    Please visit here and view the source in the browser.

  5. Rubén Casalta Says:

    Thanks dude,

    You has fixed a problem that i have a customer.

    Thanks

  6. Rick Says:

    Very nice implementation however, I was stymied with the lack of the gpx file parser referenced as http://javey.net/cgi-bin/gd.sh

    Could you provide the code for this script . . . or point a source.

  7. sj Says:

    Hello Rick,

    Here is the source for gd.sh

    #START OF SOURCE
    #!/bin/sh

    echo “Content-Type: text/xml”
    echo “”
    curl $1
    #END OF SOURCE

    The source for the HTML, … is in the note19 Google project.

Leave a Reply