n o t e 1 9 . c o m

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.

I started viewing the maps of my biking rides on Safari and much to my surprise they didn’t work. I’ve now learned that Apple Safari browser cannot handle large array initialization (this bug has been around since 2004). What is large you ask, large can be as small as an array with 300 elements. If you’ve such an array in your page, you’ll see the Safari’s Slow Script dialog (in my case clicking on the Continue button made no difference — after a few seconds the dialog would get displayed again). The only option is to break the array into smaller arrays (say 150 elements). Here is an example of a page that has a large array (900 or so elements); Firefox can render this page without any problems. Here is an example of the same page where the large array has been broken into 8 separate arrays. This version works on both Safari and Firefox (but not iPhone’s Safari). Perhaps to get this to work on iPhone’s Safari, I’ll have to split the array into smaller chunks.