Unable to get Polyline from route - google-maps

Question

I am trying to animate a polyline on top of hidden Route (with strokeWeight: 0) and animate it on this example but not sure why I am not able to grab the correct points on .interpolate() method.
What am I doing wrong?
<script src="https://maps.googleapis.com/maps/api/js?key=xxx&libraries=geometry"></script>
var map;
$(document).ready(function() {
var latlng = new google.maps.LatLng(49.241943, -122.889318);
var myOptions = {
zoom: 12,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map_canvas').get(0), myOptions);
//Starting Direction Services
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer({
map: map,
preserveViewport: true
});
directionsService.route({
origin: new google.maps.LatLng(49.241943, -122.889318),
destination: new google.maps.LatLng(49.241943, -122.999999),
waypoints: [{
stopover: false,
location: new google.maps.LatLng(49.241943, -122.889318)
}],
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
// directionsDisplay.setDirections(response);
var polyline = new google.maps.Polyline({
path: [],
strokeColor: 'red',
strokeWeight: 0
});
var bounds = new google.maps.LatLngBounds();
var line = response.routes[0].legs;
for (i = 0; i < polyline.length; i++) {
var steps = polyline[i].steps;
for (j = 0; j < steps.length; j++) {
var nextSegment = steps[j].path;
for (k = 0; k < nextSegment.length; k++) {
polyline.getPath().push(nextSegment[k]);
bounds.extend(nextSegment[k]);
}
}
}
var step = 0;
var numSteps = 250;
var timePerStep = 5;
var interval = setInterval(function() {
step += 1;
if (step > numSteps) {
clearInterval(interval);
} else {
var are_we_there_yet = google.maps.geometry.spherical.interpolate(line, step / numSteps);
line.setPath([polyline, are_we_there_yet]);
}
}, timePerStep);
line.setMap(map);
} else {
window.alert('Directions request failed due to ' + status);
}
});
});

Answer 1

The interpolate function takes these three parameters, according to the docs:
from: LatLng,
to: LatLng,
fraction: number
You're passing it the following two parameters:
google.maps.geometry.spherical.interpolate(line, step / numSteps)
And instead of passing the whole line, you should do something like:
google.maps.geometry.spherical.interpolate(latLng1, latLng2, step / numSteps)
... where latLng1 and latLng2 would be the endpoints of your line I guess.
You're also doing this... you create a Polyline, polyline. Then you get a line. But you then try and loop over polyline.length:
var polyline = new google.maps.Polyline({
path: [],
strokeColor: 'red',
strokeWeight: 0
});
var line = response.routes[0].legs;
for (i = 0; i < polyline.length; i++) {
I think that last line (and other references inside the nested loops) should refer to the line not the polyline, i.e.
for (i = 0; i < line.length; i++) {