google maps api 3 - Position of an icon on a polyline -

context: animating icon along polyline, represents car going point b. @ point in time car low on fuel, hence, need go gas station , afterwards continue point b.

hence, when car low on fuel, compute car's current position , make directions request current position point b, gas station waypoint.

once i've got answer, update polyline on car animated (i retain accomplished parts , replace remaining parts new route).

---

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

here minimal working example , 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 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         });      // route 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 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 marker @ same position 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 ' + status);         }     }); }  initmap(); 

please note using epoly v3 library computation.

are there other libraries or ways compute current position might work?