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
            );
        }
    }

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
            );
        }
    }

• javascript
• google-maps
• google-maps-api-3

Share Improve this question Follow edited Apr 23, 2022 at 17:07 user2314737 29.5k2020 gold badges108108 silver badges123123 bronze badges asked Sep 20, 2017 at 7:48 Игорь БыстревскийИгорь Быстревский 4371010 silver badges2626 bronze badges 4

• Check this sample – codtex Commented Sep 20, 2017 at 7:50
• thanks, this code works fine, but anyway its interesting what did i do wrong – Игорь Быстревский Commented Sep 20, 2017 at 8:13
• 2 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 Commented Sep 20, 2017 at 10:11
• duplicate of JavaScript : For loop with timeout – geocodezip Commented Sep 20, 2017 at 10:12

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

What your code is doing is

for(var i=0;i<100;i++){
// pute 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./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