google maps animated marker moving

Question

So im trying to move marker smoothly, but id doesnt work. Marker is moving, but not smoothly, the same result i can have if i will write

marker[n].setPosition(moveto);

i have displayed all variables in console, and its fine, all increases by right way, but it seems like

marker[n].setPosition(latlng);

is called only at the last iteration of cycle.

here is my code:

function animatedMove(n, current, moveto){
        var lat = current.lat();
        var lng = current.lng();

        var deltalat = (moveto.lat() - current.lat())/100;
        var deltalng = (moveto.lng() - current.lng())/100;

        for(var i=0;i<100;i++){
            lat += deltalat;
            lng += deltalng;

            latlng = new google.maps.LatLng(lat, lng);

            setTimeout(
                function(){
                    marker[n].setPosition(latlng);
                },10
            );
        }
    }

Check [**this sample**](https://robsite.net/google-maps-animated-marker-move/) — codtex, Sep 20 '17 at 07:50
thanks, this code works fine, but anyway its interesting what did i do wrong — Игорь Быстревский, Sep 20 '17 at 08:13
You are setting 100 timeouts for 10 milliseconds from now. All of them fire at the same time, the marker ends up positioned at the last position... — geocodezip, Sep 20 '17 at 10:11
duplicate of [JavaScript : For loop with timeout](https://stackoverflow.com/questions/24293376/javascript-for-loop-with-timeout) — geocodezip, Sep 20 '17 at 10:12

score 5 · Answer 1 · answered Sep 20 '17 at 10:10

What your code is doing is

for(var i=0;i<100;i++){
// compute new position
// run function "f" that updates position of marker after a delay of 10

What happens is that by the time the function "f" (((function(){marker[n].setPosition(latlng);}) runs after the delay, the cycle has already finished and it has reached the final position for the marker.

Following https://stackoverflow.com/a/24293516/2314737 here's one possible solution

function animatedMove(n, current, moveto) {
  var lat = current.lat();
  var lng = current.lng();

  var deltalat = (moveto.lat() - current.lat()) / 100;
  var deltalng = (moveto.lng() - current.lng()) / 100;

  for (var i = 0; i < 100; i++) {
    (function(ind) {
      setTimeout(
        function() {
          var lat = marker.position.lat();
          var lng = marker.position.lng();

          lat += deltalat;
          lng += deltalng;
          latlng = new google.maps.LatLng(lat, lng);
          marker.setPosition(latlng);
        }, 10 * ind
      );
    })(i)
  }
}

you can look at a demo here

google maps animated marker moving

1 Answers1