How to auto update current location on google map in ionic 2 application

Question

I am a beginner for ionic 2 native. I created a simple location tracking app using this tutorial (http://www.joshmorony.com/ionic-2-how-to-use-google-maps-geolocation-video-tutorial/) and I want to auto update user current location when the user is traveling. I searched for tutorials or any sources to learn about this. But I couldn't find anything for that. please if anyone knows something about auto updating user location in ioinc 2 please let me know how I can do that or give me a link.

this is my code

export class MapPage {

  x: number = 0;
  y: number = 0;

  @ViewChild('map') mapElement: ElementRef;
  map: any;

  constructor(public navCtrl: NavController) {
    this.loadMap();
  }

  loadMap() {
    Geolocation.getCurrentPosition().then((position) => {

      let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      console.log(position.coords.latitude + " " + position.coords.longitude)
      let mapOptions = {
        center: latLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

      console.log(this.map);

    }, (err) => {
      console.log(err);
    });
  }

  addInfoWindow(marker, content) {

    let infoWindow = new google.maps.InfoWindow({
      content: content
    });

    google.maps.event.addListener(marker, 'click', () => {
      infoWindow.open(this.map, marker);
    });

  }

  showMyLocation() {

    Geolocation.getCurrentPosition().then((position) => {

      let latLng = new google.maps.LatLng(this.x, this.y);

      let marker = new google.maps.Marker({
        map: this.map,
        icon: new google.maps.MarkerImage('//maps.gstatic.com/mapfiles/mobile/mobileimgs2.png',
          new google.maps.Size(22, 22),
          new google.maps.Point(0, 18),
          new google.maps.Point(11, 11)),
        position: latLng
      });

      let content = "<h4>You are here</h4>";
      this.addInfoWindow(marker, content);

    }, (err) => {
      console.log(err);
    });
  }
}

this is HTML file

<ion-header>
  <ion-navbar>
    <ion-title>
      Map
    </ion-title>
    <ion-input type=number style="border: 1px solid black" [(ngModel)]="x"></ion-input>
    <ion-input type=number style="border: 1px solid black" [(ngModel)]="y"></ion-input>
    <ion-buttons end>
      <button ion-button (click)="showMyLocation()"><ion-icon name="add"></ion-icon>Show my location</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content>
  <div #map id="map"></div>
</ion-content>

Thanks

Solution

Just use the method watchPosition instead of getCurrentPosition :

 Geolocation.watchPosition().subscribe((position) => {
  this.x = position.coords.longitude;
  this.y = position.coords.latitude;

  let latLng = new google.maps.LatLng(this.x, this.y);

  let marker = new google.maps.Marker({
    map: this.map,
    icon: new google.maps.MarkerImage('//maps.gstatic.com/mapfiles/mobile/mobileimgs2.png',
      new google.maps.Size(22, 22),
      new google.maps.Point(0, 18),
      new google.maps.Point(11, 11)),
    position: latLng
  });

  let content = "<h4>You are here</h4>";
  this.addInfoWindow(marker, content);

}, (err) => {
  console.log(err);
});
}

See here https://ionicframework.com/docs/v2/native/geolocation/ and here https://github.com/apache/cordova-plugin-geolocation#navigatorgeolocationwatchposition for more details.