How to animate a custom Google Maps marker along a route?

Question

I have written a small application for a handheld device using JavaScript and Google Maps API's, now II need to move my marker icon anywhere on the map along a route using a timer function. I have a man icon and I need to move it automatically on the map. How can I do this?

Answer 1

It doesn't move something automatically, but you should check out the Google Drive experiment by phatfusion. Looking at the code might help you out.

Answer 2

Look at exapmles of Google Maps code. There are more cool examples that could help you.

Answer 3

Unfortunately, there is no automatic-marker-movement function in the official GMaps collection.

However, if you have a GRoute, that would mean you have a set of points. To loop through the route steps, you could use something like this:

for (var c = 0; c < yourroute.getNumSteps(); c++) { 
    yourmarker.setLatLng(yourroute.getStep(c).getLatLng());
}

Of course, you'll probably want to do this asynchronously using the timers:

function moveToStep(yourmarker,yourroute,c) {
    if {yourroute.getNumSteps() > c) {
        yourmarker.setLatLng(yourroute.getStep(c).getLatLng());
        window.setTimeout(function(){
            moveToStep(yourmarker,yourroute,c+1);
        },500);
    }
}

moveToStep(marker,route,0);

For even smoother movement, you could interpolate the points from those you already have.

Answer 4

A pretty cool example is here:

http://www.kmcgraphics.com/google/