Position of an icon on a polyline

Question

Context: I am animating an icon along a polyline, which represents a car going from point A to B. At some point in time the car is low on fuel, hence, i need to go to a gas station and afterwards continue to point B.

Hence, when the car is low on fuel, i compute the car's current position and make a directions request from the current position to point B, with the gas station as a waypoint.

Once i've got the answer, i update the polyline on which the car is animated (i retain accomplished parts and replace the remaining parts by the new route).

---

The problem is that the computed "current position" of the car is way too inaccurate (i.e. the computed position differs from the actual position of the icon on the polyline).

Here is a minimal working example and its fiddle:

var map;
var line;
var first_path;

function initMap() {
    pointA = new google.maps.LatLng(50.931300, 4.226360);
    pointB = new google.maps.LatLng(48.858370, 2.294481);

    var myOptions = {
        zoom: 7,
        center: pointA
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);

    // Instantiate a directions service.
    var directionsService = new google.maps.DirectionsService,
        directionsDisplay = new google.maps.DirectionsRenderer({
            map: map
        }),
        markerA = new google.maps.Marker({
            position: pointA,
            title: "point A",
            label: "A",
            map: map
        }),
        markerB = new google.maps.Marker({
            position: pointB,
            title: "point B",
            label: "B",
            map: map
        });

    // get route from A to B
    calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);
}



function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
    directionsService.route({
        origin: pointA,
        destination: pointB,
        avoidTolls: true,
        avoidHighways: false,
        travelMode: google.maps.TravelMode.DRIVING
    }, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            //directionsDisplay.setDirections(response);

            console.debug(response);
            first_path = response.routes[0].overview_path;

            // Make polyline on the path
            line = new google.maps.Polyline({
                path: first_path,
                strokeColor: 'black',
                strokeOpacity: 1,
                icons: [{
                    icon: {
                        path: google.maps.SymbolPath.CIRCLE,
                        scale: 5,
                        strokeColor: '#393',
                        strokeOpacity: 0.8
                    },
                    offset: '90%'
                }]
            });

            line.setMap(map);

            // Add a marker at the same position as the icon --> INACCURATE
            var loc = line.GetPointAtDistance(line.Distance() * 0.9);
            var marker = new google.maps.Marker({
                      position: loc,
                      map: map,
                      title: 'Wrong position!'
                    });

        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });
}

initMap();

Please note that i am using the Epoly V3 library for this computation.

Are there any other libraries or ways to compute the current position which might work?