while loop and google maps

while loop and google maps

so i'm working on this project for university
.
I have loaded in several markers via xml and pushed their latlng into an array.

I have created an html link that on click should run through the marker lat lng array and pan the map to the next location in the array.

problem is that the map just pans to the last entry in the array because it runs through the loop before the animation has played

here is the working example  http://playingintraffic.co/commuter002/ the maps.js file contains all code we are troubleshooting.

function animateOnPlay() {
//TODO: get pan animation to run through each marker entry
//TODO: timing on marker animation to match length of video
for (var i = 0; i < latArray.length; i++) {
map.panTo (new google.maps.LatLng(latArray[i], lngArray[i]));
//alert(i);

something like this is require but i'm new to jquery and not sure of the syntax. maybe i need some kind of event listener in there too?

while(google.maps.LatLng != latArray[i], lngArray[i]) {
//do nothing
}

}
}


any advice is apperciated, the google maps api forum has been useless.