Dibujar una polilínea suave en Google Maps

Estoy usando googlemaps api para dibujar Polyline entre coordenadas (Lat/Lang) obtenidas de un dispositivo GPS usando Angular 6. Las coordenadas se actualizan con un intervalo de 10 segundos. Estoy usando la clase Polyline de Google Maps para dibujar la línea, pero el problema es que cada vez que dibuja una línea entre los dos puntos (punto nuevo y punto antiguo), salta instantáneamente entre los puntos en lugar de hacer un dibujo de ruta animada suave similar a Uber . Necesito un dibujo de ruta suave entre puntos.

Estoy leyendo las coordenadas de un archivo JSON por el momento.

Puede alguien ayudarme con esto.?

Aquí está el código para dibujar Polyline:

import { Component } from '@angular/core';
import { ViewChild } from "@angular/core";

import { } from 'googlemaps'
// import { } from '@types/googlemaps'
import { DataFetcherService } from "src/app/services/data-fetcher.service";

import { map } from 'rxjs/operators';
import { of, from } from "rxjs";
import { Promise } from "q";
// import {} fr

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  title="maps-app";
  @ViewChild('gmap') gmapElement: any;
  map: google.maps.Map;
  snappedPolyline: google.maps.Polyline;
  icon = "http://maps.google.com/mapfiles/ms/micons/blue.png";
  private snappedCoordinates: any[] = [];
  index = 1;
  markerOffset = 0;
  prevMarkerOffset = 0;
  prevlatlng;
  latlng;
  ngOnInit() {

      this.initMap()

     // Define the symbol, using one of the predefined paths ('CIRCLE')
      // supplied by the Google Maps JavaScript API.
      var lineSymbol = {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 8,
        strokeColor: '#393'
      };

    this.snappedPolyline = new google.maps.Polyline({
        path: this.snappedCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
        icons: [{
          icon : lineSymbol,
          offset: '100%'
        }],
        map: this.map
      })
      this.setCenter();
  }
   constructor (private dataFetcher: DataFetcherService){ }
  initMap(){
    let mapProp = {
      center: new google.maps.LatLng(8.89443000002,76.61418),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
  }

  ngAfterContentInit(){

    console.log("After content init")
    this.dataFetcher.fetchJSONData('assets/data/latlangobj.json').subscribe(data => {
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(8.89443000002,76.61418),
        map: this.map,
        icon: this.icon,
        title: 'Center !'
      });

      data.forEach((cordinates) => {

        setTimeout(() =>
        {       
          console.log("setTimeout(), this.index * 12000 :", this.index * 12000)
          this.prevlatlng = this.latlng          
          this.latlng = new google.maps.LatLng(cordinates.lat, cordinates.lng)
          this.snappedPolyline.getPath().push(this.latlng);
          this.prevlatlng = this.latlng
          this.snappedPolyline.setMap(this.map);
          this.updateMarkerPosition(this.map, marker, cordinates.lat, cordinates.lng);
        }, this.index * 500);  // 6k *  this.index
        ++this.index
      });  
      }, // outer-observable ends here
     err => console.error(err)
    )
  }

  calculateDistances(start, end) {

    var stuDistances = {};
    const metres = google.maps.geometry.spherical.computeDistanceBetween(start, end);    // distance in metres
        return metres
    }

      // update marker position
      updateMarkerPosition(map, marker, lat, lon) {
          console.log("MoveMarker()")
          try {
          marker.setPosition(new google.maps.LatLng(lat, lon));
          map.panTo(new google.maps.LatLng(lat, lon));
        } catch (e) {}
      }
    // set the center to the updated latlang
  setCenter() {
    this.map.setCenter(new google.maps.LatLng(8.89443000002,76.61418));

    let marker = new google.maps.Marker({
      position: new google.maps.LatLng(8.89443000002,76.61418),
      map: this.map,
      icon: this.icon,
      title: 'Center !'
    });
}