Gradient line in SVG for Google map path

Question

I am interpreting GPS location data in google map, here i would like create a path with gradient which starts with red and ends with orange

this tutorial has only a straight single color line as path

following code is responsible for 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

with help of @JerryDuwall 's answer i have done this

Of-course it is not a gradient but some how attractive than 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 makeGradientColor declartion 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

You could use the interpolate method within the Geometry library (https://developers.google.com/maps/documentation/javascript/reference#spherical) to get x positions along the straight-line path (I'm assuming you're dealing with straight lines). This would allow you to construct x-1 polylines. You could then generate colors within a red-orange gradient (refer to Generate colors between red and green for an input range) and assign them to the strokeColor of each of your x-1 polylines.

Increase x to get a more subtle gradient.