How to make the marker movement smooth on google maps (javascript)? -

i have made simple map.js file. have loop through locations , plot marker accordingly, erasing previous 1 , show smooth marker movement.

this i've tried. far, puts marker on final location ad know why (because of settimeout()) don't know how fix it.

any appreciated.

this part of whole code.

var lat; var lng; var oldlat; var oldlng; var marker; var map; var numdeltas = 100; var delay = 10; //milliseconds var j = 0; var deltalat; var deltalng;  oldlat = data.data[0].lat; oldlng = data.data[0].long;  marker = new google.maps.marker({   position: new google.maps.latlng(oldlat, oldlng),   map: map, });   for(var i=1; i<72; i++) {     lat = data.data[i].lat;  //have data     lng = data.data[i].long;  //have data     transition(lat, lng);     oldlat = lat;     oldlng = lng; }  function transition(lat, lng) {     j = 0;     deltalat = (number(lat) - number(oldlat))/numdeltas;     deltalng = (number(lng) - number(oldlng))/numdeltas;     var latlng = new google.maps.latlng(oldlat, oldlng);     movemarker(latlng); }  function movemarker(latlng) {     marker.setposition(latlng);     oldlat = number(oldlat) + deltalat;     oldlng = number(oldlng) + deltalng;     var latlng = new google.maps.latlng(oldlat, oldlng);     if(j!=numdeltas)     {         j++;         settimeout(movemarker(latlng), delay);     } } 

you consider following approach:

• generate marker collection per every location
• display marker using marker.setvisibility(value)

example

var markers = [];  function initialize() {            var map = new google.maps.map(document.getelementbyid('map'), {          zoom: 6,          center: new google.maps.latlng(59.526964, 23.617352),          maptypeid: google.maps.maptypeid.roadmap      });        var startpos = new google.maps.latlng(60.174039, 24.940939);      var endpos = new google.maps.latlng(59.337174, 18.067883);             // generate fake points route      var pointsno = 80;      var latdelta = (endpos.lat() - startpos.lat()) / pointsno;      var lngdelta = (endpos.lng() - startpos.lng()) / pointsno;      var positions = [];      (var = 0; < pointsno; i++) {          var curlat = startpos.lat() + * latdelta;          var curlng = startpos.lng() + * lngdelta;          positions.push(new google.maps.latlng(curlat, curlng));              var curmarker = new google.maps.marker({              map: map,              position: new google.maps.latlng(curlat, curlng),              visible: false          });          markers.push(curmarker);      }  }          function displaymarker(markers, index, delay) {          if (index > 0)          markers[index - 1].setvisible(false);      else {          markers[markers.length - 1].setvisible(false);      }        markers[index].setvisible(true);      if (index < markers.length - 1) {          settimeout(function () {              displaymarker(markers, index + 1, delay);          }, delay);      } else {          displaymarker(markers, 0, delay);      }  }      google.maps.event.adddomlistener(window, 'load', function() {      initialize();  });      function move() {      var delay = 40;      displaymarker(markers, 0, delay);  }

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true" type="text/javascript"></script>  <input type="button" value="move" onclick="move();"/>  <div id="map" style="width: 480px; height: 320px;"></div>