How to add some polyline depending on the current slide index in google maps?

Ionic Framework ionic-v3
1

My situation is this:
I have a google map that occupies the whole page page with a top header that can be slided. I would like that when I slide I can retrieve current slide index, so I can draw different polyline for each index.
home.html

<ion-slides (ionSlideDidChange)="slideChange()">
      <ion-slide>
      </ion-slide>
      <ion-slide>
      </ion-slide>
      <ion-slide>
      </ion-slide>
</ion-slides>

home.ts

...
ionViewDidEnter() {
    this.loadMap();
  }

slideChange() {
    this.currentIndex = this.slides.getActiveIndex();
  }
..

loadMap() {
    let element: HTMLElement = document.getElementById('map');
    let coordinates = this.retrieveCoordinates();
    let coordinates2 = this.retrieveCoordinates2();
    
    let map: GoogleMap = this.googleMaps.create(element, mapOptions);

    map.one(GoogleMapsEvent.MAP_READY).then(
      () => {
        if (this.currentIndex === 0) {
          map.addPolyline({
            points: coordinates,
            color: '#0000FF',
            width: 5,
          });

          map.animateCamera({
            target: coordinates,
            zoom: 16,
            tilt: 50,
            duration: 1500
          });
        } else if (this.currentIndex === 1) {
          map.addPolyline({
            points: coordinates2,
            color: '#FF0000',
            width: 5,
          });

          map.animateCamera({
            target: coordinates2,
            zoom: 16,
            tilt: 50,
            duration: 1500
          });
        }
}

The problem is that I can not resume the value of this.currentIndex variable within this lambda function. How can I get around this problem?