How to move smoothly/slow change position marker?

[Rikoprim]

<GmapMap
  :center="{ lat: -7.782636115093931, lng: 113.18306996451139 }"
  :zoom="10"
  map-type-id="terrain"
  :options="options"
  @click="clickedMap"
  style="position: absolute; height: 100%; width: 100%; left: 0; top: 0"
>
  <GmapMarker :position="bus1" :clickable="true" :animation="2" ref="gmarker"/>
</GmapMap>

clickedMap(e) {
  var data = JSON.stringify(e.latLng);
  var obj = JSON.parse(data);
  var marker = this.$refs.gmarker

  this.animatedMove(marker, marker.position, e.latLng)

},

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

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

  var delay = 10 * 0.5;
  for (var i = 0; i < 100; i++) {
    (function (ind) {
      setTimeout(function () {
        var self = this;
        var lat = current.lat;
        var lng = current.lng;

        lat += deltalat;
        lng += deltalng;
        var latlng = new google.maps.LatLng(lat, lng);
        var data = JSON.stringify(latlng);
        var obj = JSON.parse(data);
        this.bus1 = {
          lat: obj["lat"],
          lng: obj["lng"],
        };
        console.log(this.bus1);
      }, delay * ind);
    })(i);
  }
},

[Danushka96]

Any suggestion for this issue?