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..

[liamdebeasi]

Thanks for the issue. Can you provide a repo with the code required to reproduce this issue?

[ghost]

actually I can't provide the repo.. let me create same on stackbliz.. will that work ?

[liamdebeasi]

Are you using the Google Maps Cordova plugin? If so a GitHub repo with a minimal reproduction is likely necessary. Otherwise, StackBlitz is fine.

[ghost]

No I am not using google map plugin ... creating stackbliz

[ghost]

Hi I tried create stackbliz demo but I have used ionic 4 with angular 9 so there is no template available in that but still I tried its way to messy there ! can you create local project with ionic 4 and angular 9 and paste my code do duplicate ?

my dep. are

"@angular/common": "~9.0.1",
    "@angular/compiler": "~9.0.1",
    "@angular/core": "~9.0.1",
    "@angular/fire": "^5.2.1",
    "@angular/forms": "~9.0.1",
    "@angular/google-maps": "^9.0.0-rc.0",
    "@angular/platform-browser": "~9.0.1",
    "@angular/platform-browser-dynamic": "~9.0.1",
    "@angular/router": "~9.0.1",
    "@ionic-native/app-availability": "^5.15.0",
    "@ionic-native/app-rate": "^5.15.0",
    "@ionic-native/camera": "^5.15.0",
    "@ionic-native/contacts": "^5.15.0",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/facebook": "^5.15.0",
    "@ionic-native/geolocation": "^5.22.0",
    "@ionic-native/google-maps": "^5.5.0",
    "@ionic-native/google-plus": "^5.15.0",
    "@ionic-native/native-geocoder": "^5.22.0",
    "@ionic-native/social-sharing": "^5.15.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.7.1",
    "@ionic/storage": "^2.2.0",
    "@ngx-translate/core": "^11.0.1",
    "@turf/turf": "^5.1.6",
    "@types/googlemaps": "^3.39.2",
    "angular-i18next": "^7.0.0",
    "angular-validation-message": "^2.0.1",
    "cordova-android": "8.1.0",
    "cordova-browser": "5.0.4",
    "cordova-ios": "5.0.1",
    "cordova-plugin-appavailability": "^0.4.2",
    "cordova-plugin-apprate": "^1.5.0",
    "cordova-plugin-browsertab": "^0.2.0",
    "cordova-plugin-buildinfo": "^4.0.0",
    "cordova-plugin-camera": "^4.1.0",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-contacts": "^3.0.1",
    "cordova-plugin-customurlscheme": "^4.4.0",
    "cordova-plugin-device": "~2.0.2",
    "cordova-plugin-dialogs": "^2.0.2",
    "cordova-plugin-facebook4": "^3.2.0",
    "cordova-plugin-geolocation": "^4.0.2",
    "cordova-plugin-globalization": "^1.11.0",
    "cordova-plugin-googleplus": "^8.4.0",
    "cordova-plugin-inappbrowser": "^3.2.0",
    "cordova-plugin-ionic-webview": "~4.1.3",
    "cordova-plugin-nativestorage": "^2.3.2",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-whitelist": "~1.3.3",
    "cordova-plugin-x-socialsharing": "^5.6.4",
    "cordova-universal-links-plugin": "git+https://github.com/walteram/cordova-universal-links-plugin.git",
    "core-js": "^2.5.4",
    "es6-promise-plugin": "^4.2.2",
    "firebase": "^7.1.0",
    "i18next": "^19.0.3",
    "i18next-browser-languagedetector": "^4.0.1",
    "i18next-xhr-backend": "^3.2.2",
    "ngx-quill": "^8.0.0",
    "ngx-virtual-scroller": "^3.0.3",
    "quill": "^1.3.7",
    "rxjs": "~6.5.4",
    "tslib": "^1.9.0",
    "videogular2": "^7.0.1",
    "zone.js": "~0.10.2",
    "cordova-plugin-ionic-keyboard": "~2.2.0"

[ghost]

I have done POC https://github.com/ikishanoza/ion-segment-ion-slide-issue here please make android build and check coz on web its working

[liamdebeasi]

Thanks for the follow up. Are you testing this on a physical Android device or an emulator? We recommend testing on a physical device as older Android emulators ship with very outdated webviews.

[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!