To do this correctly, I found that you need to get the point to point route, and then iterate over the points to animate the marker along the path between the survey of your location. The main approach I used is to get the route from start to finish using a service such as OSRM. Typically, you need to translate the encoded polyline into a set of points, and then create a timer that periodically updates the marker location to a point in the polyline, which is the proportion of the time between location updates. Therefore, if you have 300 points in the polyline route between points and your location update every 30 seconds, you should set up a timer that starts every second and moves the marker to the index of the points array in (secs_since_geocode / 30 * number of points). This could be smoothed out, even more animating the transition from the marker's original location to the new marker location, although this approach would have to be completed before the next timer event moves the marker again.
It's rude and ugly, but you can see something that works (you need to wait about 20 seconds) at https://jsfiddle.net/pscott_au/1wt2o9Lw/
Basically, what I'm trying to achieve is to provide some transition for the marker between getting the GPS location coordinates, which will usually be tested at some interval (say, 30 seconds). Ideally, you want the marker to move smoothly between locations between these updates. If you are driving, you would ideally want to show a marker animating along the expected drive path, and therefore you need to get the path from the routing service. I use the public OSRM service, although you would ideally set up your own backend for this or use a commercial offer. Therefore, when a new location is received, the approach is to get the route from the last location to the new location, and then go to that location along the way. In later versions of OSRM, there is the option of providing the result as a list of lat / lng points, so there is no need to decode the encoded polyline. So you just need to create a queue of points, and then pop positions with a short interval of 500 ms in order to move the marker. The other answer is excellent and provides a good approach to smoothing the animation even more. The path is built from the return result as follows:
$.ajax({ url: url, success: function(data){ //console.log( 'Got route ' + JSON.stringify(data.route_geometry) ); // if we assume that we have 30 secs until the next geo location then we need to animate // across this path for this duration - to demonstrate we will animate every 2 secs over 20 secs // so to calculate the index offset we will divide the number of points in our path by 20 route_geometry = []; // console.log( data.route_geometry ); var inc_offset = $(data.route_geometry ).size() / 20; for (i = 0; i < 20; i++) { console.log(i + ' x inc_offset of ' + inc_offset ); route_geometry.push( data.route_geometry[ Math.round(i*inc_offset ) ] ); } } });
Over the next few days, I will clarify and clean up, and then update this answer.