ion slide, ion segment and google map

[ghost]

I have used ion-segment and ion-slides with google map using <div #Map class="map"></div>.

my html code looks like this

<ion-segment class="segment-wrapper" (ionChange)="segmentChanged($event)" [(ngModel)]="segment">
      <ion-segment-button value="0">
        <ion-label>Location</ion-label>
      </ion-segment-button>
      <ion-segment-button value="1">
        <ion-label>Details</ion-label>
      </ion-segment-button>
      <ion-segment-button value="2">
        <ion-label>Photos</ion-label>
      </ion-segment-button>
    </ion-segment>

ion-slides are arrange like this ..

 <ion-slides class="slides-wrapper" #slides (ionSlideDidChange)="slideChanged()" 
    scrollbar="true">
    <ion-slide>
      <div #Map class="map"></div>
    </ion-slide>
    <ion-slide></ion-slide>
   <ion-slide></ion-slide>
<ion-slides>

so basically when use click on any segment it will move to according slide here is ts code for the same (for slide and segment change)

@ViewChild('slides', { read: false }) slider: IonSlides;
  slideChanged() {
    this.slider.getActiveIndex().then(index => {
      this.segment = index;
    });
  }

  segmentChanged(ev) {
    this.slider.slideTo(ev.target.value)
  }

css for map

.map{
  height: 100%;
}
.map img {
  max-height: none !important;
}

when I click on map anywhere its add marker also here is the code for the same.

map: any;
marker: any;

this.map.addListener('click', (event) => {
        this.marker.setMap(null);
        this.marker = new google.maps.Marker({
          position: { lat: event.latLng.toJSON().lat, lng: event.latLng.toJSON().lng },
          map: this.map,
          title: 'Click to zoom'
        });
        this.map.panTo(this.marker.getPosition())
        var latlngbounds = new google.maps.LatLngBounds();
        latlngbounds.extend({ lat: event.latLng.toJSON().lat, lng: event.latLng.toJSON().lng });
        this.map.fitBounds(latlngbounds);
        this.setMarkerAndUpdateForm(event.latLng.toJSON().lat, event.latLng.toJSON().lng);
      });

what's wrong here can anyone help ?

sometime in web its working but on mobile device its not working as expected another issue is when i click on map and add marker or zoom in zoom out and then try to slide , slide works fine but segment is not changing as expected. attaching small video here..

[wf9a5m75]

Please understand this plugin how works before using in your app.

[ghost]

Sorry my bad its not related to this plugin :)