Smooth Route Animation in Google Maps: panTo vs. setCenter


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


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.

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.

14 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.

  8. Jan Says:

    hi dude,

    For a school-project we need to animate driven ways of motor-ships. Now i’m learning about the different possibilities of animating a way with google maps.

    How did you your animation? Can you send me the source code?

    Thanks and greats..
    Jan

    • Shahram Javey Says:

      Hi Jan, The source code is in Google source code project site. The code is a combination of Adobe Flex, HTML and Javascript. When I wrote the code, HTML5 was not yet readily available. If I was doing the project today, I would use HTML 5 and Javascript. Feel free to take a look at the source code and reuse any part that makes sense to reuse. You also should be able to use the GPX player as is. Please see here. You will need to prepare a GPX file via a URL and then use the GPX player (this is what I called it, since it takes a GPX file and animates it). Please note that the program is not that robust and the input GPX file needs to be identical in terms of headers and format for it to work. Good luck with your school project!

  9. KimiRee Says:

    Can someone please help me… am not an IT guru bt I need to animate a map for a country caravan…. Please where do I start….

  10. Site En Flash Says:

    Site En Flash…

    [...]Smooth Route Animation in Google Maps: panTo vs. setCenter « n o t e 1 9 . c o m[...]…

  11. Great article. Thanks for sharing! Says:

    Great article. Thanks for sharing!…

    [...]Smooth Route Animation in Google Maps: panTo vs. setCenter « n o t e 1 9 . c o m[...]…

  12. 30 links español PR 5-2 Says:

    30 links español PR 5-2…

    [...]Smooth Route Animation in Google Maps: panTo vs. setCenter « n o t e 1 9 . c o m[...]…

  13. online electronics Says:

    online electronics…

    [...]Smooth Route Animation in Google Maps: panTo vs. setCenter « n o t e 1 9 . c o m[...]…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Follow

Get every new post delivered to your Inbox.

%d bloggers like this: