Show vehicle moving in google map angular 6

In this tutorial we will learn about how to show your vehicle moving on map.

Below are the prerequisite 

• Google Map in Angular 6
• Directions and waypoints in google map

If you followed above two tutorials you have added waypoints and also set direction in the map.

Now we just need to set our vehicle live location.

make changes in your app.component.ts or any file in which you have made your map changes.

app.component.ts

import { Component } from '@angular/core';
import { interval } from 'rxjs';
import { HttpClient } from '@angular/common/http';

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

  lat = 51.678418;
  lng = 7.809007;
  public origin: { lat: 51.673858, lng: 7.815982 };
  public destination: { lat: 51.723858, lng: 7.895982 };
  timerSubscription: any;
  currentLat: any;
  currentLng: any;

  
  icon = {
    url: ('../../assets/icons/bus.svg'),
    scaledSize: {
      height: 60,
      width: 60
    }
  };

  waypoints = [
    {
      location: { lat: 51.673858, lng: 7.815982 },
      stopover: true
    },
    {
      location: { lat: 51.373858, lng: 7.215982 },
      stopover: true
    },
    {
      location: { lat: 51.723858, lng: 7.895982 },
      stopover: true
    }
  ];

  constructor(private httpClient: HttpClient) {

    //Timer to fetch data on an interval

    this.timerSubscription = interval(1000)
      .subscribe(() => this.getCurrentLocationOfVehicle());
  }

  getCurrentLocationOfVehicle() {

    const requestMap: any = {};
    requestMap.userName = 'userName';
    requestMap.password = 'password';
    // replace it with your feed URL 
    requestMap.gpsTrackUrl = 'http://tracking/url/';

    this.getCurrentLatLong(requestMap).subscribe(data => {
      //set current lat lng of vehicle
      this.currentLat = data.lat;
      this.currentLng = data.long;
    },
      err => console.log('error in fetching data' + err),
      () => console.log('done')
    );
  }

  getCurrentLatLong(trackData): any {
    return this.httpClient.post('trackUrl', trackData);
  }

}

make changes in your app.component.html or any file in which you have made your map changes.

app.component.html 

<agm-map [latitude]="lat" [longitude]="lng">

<agm-direction 

  [origin]="origin" 

  [destination]="destination"

  [waypoints]="waypoints"

  [travelMode]="'DRIVING'">
</agm-direction>
   
<!-- Show live location of vehicle -->
<agm-marker 

  [latitude]="currentLat" 

  [longitude]="currentLng" 

  [iconUrl]="icon">

</agm-marker>

</agm-map>

This will show your vehicle moving in the desired direction.

let me know in comments if you face any issue.