ion slide, ion segment and google map

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…

[ghost]

No I am not using google map plugin … creating stackbliz

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!