SVG gradient line for google map path

Question

I interpret the GPS location data on a Google map, here I would like to create a path with a gradient that starts with red and ends with orange

this tutorial only has a straight monochrome line as a way

The following code is responsible for the path in gmap

var flightPath = new google.maps.Polyline({
 path: flightPlanCoordinates,
 geodesic: true,
 strokeColor: '#FF0000',
 strokeOpacity: 1.0,
 strokeWeight: 2
});

How can I change this to Gradient?

Answer 1

using @ JerryDuwall answer I did it

Of course, this is not a gradient, but some kind of attractive than a single color line

$.each(flightPlanCoordinates,function(k,v){
    i++;
    curLatLang  = new google.maps.LatLng(v[0],v[1]);
    if(prevLatLang == ""){
        prevLatLang = curLatLang;
    }else{
        var strokeColor = makeGradientColor({r:0, g:255, b:204}, {r:255, g:0, b:0}, ((i/coordinatelog.length)*100));
        var flightPath = new google.maps.Polyline({
        path: [prevLatLang,curLatLang],
        geodesic: true,
        strokeColor: strokeColor.cssColor,
        strokeOpacity: 1.0,
        strokeWeight: 2
        });
        prevLatLang = curLatLang;
        flightPath.setMap(map);
    }
}): 

And makeGradientColordeclartion follows

function makeGradientColor(color1, color2, percent) {
    var newColor = {};
    function makeChannel(a, b) {
        return(a + Math.round((b-a)*(percent/100)));
    }
    function makeColorPiece(num) {
        num = Math.min(num, 255);   // not more than 255
        num = Math.max(num, 0);     // not less than 0
        var str = num.toString(16);
        if (str.length < 2) {
            str = "0" + str;
        }
        return(str);
    }
    newColor.r = makeChannel(color1.r, color2.r);
    newColor.g = makeChannel(color1.g, color2.g);
    newColor.b = makeChannel(color1.b, color2.b);
    newColor.cssColor = "#" + 
                        makeColorPiece(newColor.r) + 
                        makeColorPiece(newColor.g) + 
                        makeColorPiece(newColor.b);
    return(newColor);
}

Answer 2

interpolate (https://developers.google.com/maps/documentation/javascript/reference#spherical), x ( , ). x-1. - (. ) strokeColor x-1 .

x, .