Animate a route displaying both google maps and google streetview

Question

I'm working on a routetracking webbapp and thought it would be cool to animate the route instead of just showing it on a map.

I think this is pretty cool: http://tripgeo.com/DirectionsMapExamples.aspx?id=2

I would like to implement this for my routes but: For what i understand (as i cont read the code) they only have a start/end address, the rest is generated. As I got a complete route this wont work for me.

What I need to implement is then a script that checks streetview API for every routepoint for a panorama and if available display it else skip to the next one.

This exceeds my knowledge of interacting with maps/streetview and would love to hear for anyone that has done such a thing before and if possible give me some pointers :)

Answer 1

I am doing something very similar, and this is my idea. Once you have shown the route, you know the information stored in 'legs' or 'waypoints' (whichever way you would like to put it). Then, reload the div using setTimeout or setInterval for every second and at each reload, update the position of your icon to that start_point in the leg.

Here is the requestHandler method

var i = 0;
function requestHandler(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(result); //Your directionsDisplay object
        var myRoute = result.routes[0].legs[0];
        if(i < myRoute.steps.length; i++) {
           //Write the code to include the icon using google.maps API
        }
    }
setTimeout(requestHandler,1000);
}

I know this may not be the perfect solution, but you just need to tinker around with it. I'm playing with it to find the perfect solution as well.