javascript - Show a moving marker on the map -

i trying make marker move(not disappear , appear again) on map vehicle moves on road.

i have 2 values of latlng , want move marker between 2 till next point sent vehicle. , repeat process again.

what tried:[this not efficient way, know]

my thought implement above using technique in points below:

1) draw line between two.

2) latlng of each point on 1/10th fraction of polyline.

3) mark 10 points on map along polyline.

here code:

var isopen = false; var deviceid; var accountid; var displaynameofvehicle; var maps = {}; var lt_markers = {}; var lt_polyline = {}; function drawmap(jsondata, mapobj, device, deletemarker) {     var oldposition = null;     var oldimage = null;     var arrayoflatlng = [];      var lat = jsondata[0].latitude;     var lng = jsondata[0].longitude;     //alert(jsondata[0].imagepath);      var mylatlng = new google.maps.latlng(lat, lng);      if (deletemarker == true) {         if (lt_markers["marker" + device] != null) {             oldimage = lt_markers["marker" + device].geticon().url;             oldposition = lt_markers["marker" + device].getposition();             lt_markers["marker" + device].setmap(null);             lt_markers["marker" + device] = null;         }         else {             console.log('marker null');             oldimage = new google.maps.markerimage(jsondata[0].imagepath,                                                      null,                                                      null,                                                       new google.maps.point(5, 17), //(15,27),                                                      new google.maps.size(30, 30));             oldposition = mylatlng;         }     }       var image = new google.maps.markerimage(jsondata[0].imagepath,                                                      null,                                                      null,                                                       new google.maps.point(5, 17), //(15,27),                                                      new google.maps.size(30, 30));     lt_markers["marker" + device] = new google.maps.marker({         position: mylatlng,         icon: image,         title: jsondata[0].address     });     if (oldposition == mylatlng) {         alert('it same');         lt_markers["marker" + device].setmap(mapobj);         mapobj.panto(mylatlng);     }     else {         alert('it not same');         var markmarker = null;         var = 10;         (i = 10; <= 100; + 10) {             //-------             //  settimeout(function() {             if (markmarker != null) {                 markmarker.setmap(null);                 markmarker = null;             }             alert('inside loop');             var intermediatelatlng = mercatorinterpolate(mapobj, oldposition, mylatlng, / 100);             alert('intermediate latlng :' + intermediatelatlng);             arrayoflatlng.push(intermediatelatlng);              var flightpath = new google.maps.polyline({                 path: arrayoflatlng,                 strokecolor: "#ffffff",                 strokeopacity: 1.0,                 strokeweight: 1             });             flightpath.setmap(mapobj);             if (i != 100) {                 markmarker = new google.maps.marker({                     position: intermediatelatlng,                     icon: image,                     title: jsondata[0].address,                     map: mapobj                 });              }             else {                 markmarker = new google.maps.marker({                     position: intermediatelatlng,                     icon: oldimage,                     title: jsondata[0].address,                     map: mapobj                 });                             }             mapobj.panto(intermediatelatlng);             //--------             //   }, 1000);         }     }  } function mercatorinterpolate(map, latlngfrom, latlngto, fraction) {     // projected points     var projection = map.getprojection();     var pointfrom = projection.fromlatlngtopoint(latlngfrom);     var pointto = projection.fromlatlngtopoint(latlngto);     // adjust lines cross 180 meridian     if (math.abs(pointto.x - pointfrom.x) > 128) {         if (pointto.x > pointfrom.x)             pointto.x -= 256;         else             pointto.x += 256;     }     // calculate point between     var x = pointfrom.x + (pointto.x - pointfrom.x) * fraction;     var y = pointfrom.y + (pointto.y - pointfrom.y) * fraction;     var pointbetween = new google.maps.point(x, y);     // project lat/lng     var latlngbetween = projection.frompointtolatlng(pointbetween);     return latlngbetween; } 

problems faced:

1) marker not showing on map because process of plotting , removal of marker fast marker not visisble on screen. i've tried settimeout, , not @ all.

2) if alow browser run code more 5 minutes, browser crashes.

note: above function called every 10 seconds using setinterval.

what can better solution? please help..

for marker move relatively smoothly, need to

• update more every 1/10 fraction of polyline (at least every few pixels)
• call update method more frequently
• don't delete , re-add marker

for example, like:

var counter = 0; interval = window.setinterval(function() {    counter++;   // pretend doing real calculation of   // new position along complex path   var pos = new google.maps.latlng(35, -110 + counter / 100);   marker.setposition(pos);   if (counter >= 1000) {     window.clearinterval(interval);      } }, 10); 

i made simple example @ http://jsfiddle.net/bmsbu/2/ shows marker moving along straight path. if want, of code above regarding along line can reused (or check out http://broady.github.io/maps-examples/points-along-line/along-directions.html )