google map polyline animate

var departure = new google.maps.LatLng(-6.18049, 106.82638); //Set to whatever lat/lng you need for your departure location
var arrival = new google.maps.LatLng(-6.17770, 106.82141); //Set to whatever lat/lng you need for your arrival location
var line = new google.maps.Polyline({
    path: [departure, departure],
    strokeColor: "#FF0000",
    strokeOpacity: 0.7,
    strokeWeight: 2,
    geodesic: true, //set to false if you want straight line instead of arc
    map: map,
});
var step = 0;
var numSteps = 250; //Change this to set animation resolution
var timePerStep = 5; //Change this to alter animation speed
var interval = setInterval(function() {
   step += 1;
   if (step > numSteps) {
       clearInterval(interval);
   } else {
       var are_we_there_yet = google.maps.geometry.spherical.interpolate(departure,arrival,step/numSteps);
       line.setPath([departure, are_we_there_yet]);
   }
}, timePerStep);

How about a polyline with 4 coordinates in path?

How can I get this to go around the streets? Right now it just jumps across everything. Is there a way to achieve the timed rendering but have it pivot at the polyline points rather than jump across?