How to add slider for google map info card in ionic 3

Question

i am very new to ionic framework. I want to add multiple markers along with the information card in the slider form just like the image attached with this . I have able to add multiple markers in the map but no idea how to add information slider which will activate the marker. corresponding to the slider. Can any please give me some hint on how to work with this.

My eventmap.ts file to show multiple markers

export class EventMapPage {
    public userToken:any;
    public userPostData = {"api_token":""};
    public responseData:any;
    public dataSet:any;



    @ViewChild('map') mapRef:ElementRef;

  constructor(...) {
      this.getEvents().then(result=> {
          this.responseData = result;
          this.DisplayMap(this.responseData);
      });

  }

     //Get all the available events
    getEvents(){
        const data = localStorage.getItem('userToken');
        this.userPostData.api_token= data;
        return this.authService.postData(this.userPostData,'events');
    }

    //Initializing the map


  DisplayMap(data) {
this.geolocation.getCurrentPosition().then((resp) => {
   const location = new google.maps.LatLng(resp.coords.latitude,
     resp.coords.longitude);
   const options = {
     center:location,
     zoom:10,
     mapTypeControl: false,
     streetViewControl:false,
   };
     const map = new google.maps.Map(this.mapRef.nativeElement,options);
     //Loop the markers
       if(data != null){
         for(var i=0; i<data.length; i++){
           this.multipleMaker(parseFloat(data[i].lat),parseFloat(data[i].lon),map);
         }
       }
    }).catch((error) => {
      console.log('Error getting location', error);
    });

  }

  //Marker function
 multipleMaker(lat,lng,map) {
    return new google.maps.Marker({
        position:{lat:lat,lng:lng},
        map:map
    });
}


}

Answer 1

After some trail an error , research on google, i finally figured it out .

The solution to this that i come up with is as follows

in map.html

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

  <div  class="slider-wraper">
    <ion-slides slidesPerView="1" (ionSlideDidChange)="slideChanged()">
      <ion-slide *ngFor="let item of responseData?.weekEvents">
        <ion-card tappable (click)="viewDetail(item.id)">
          <div class="event-image-holder search-list">
            <img src="http://localhost:8000/{{item.photo_url}}"/>
          </div>
          <ion-card-content>
            <div class="event-info">
              <div class="event-descp">
                <h2>{{item.title}}</h2>
                <p>
                  {{item.club.name}}
                </p>
                <p>
                  <strong>{{item.attendees.length}} are going</strong>
                </p>
              </div>
            </div>
          </ion-card-content>
        </ion-card>
      </ion-slide>
    </ion-slides>
  </div>
</ion-content>

in map.ts

First import slider

import { Slides } from 'ionic-angular';

Then inside class get the reference of the slider

@ViewChild(Slides) slides: Slides;

Then add this methord

slideChanged() {
    let currentIndex = this.slides.getActiveIndex();
    let currentEvent  =this.responseData.weekEvents[currentIndex];
    this.map.setCenter({lat: parseFloat(currentEvent.lat),lng:parseFloat(currentEvent.lon)});
}

This will make the marker of current slider as the center of the map

Only thing now left to do is clicking on marker should make the slider active. I will update it here once its done. :))