Ionic 5 did not show Google Maps on Android. iOS is fine

Hello,

I wrote my first App … it should display restaurants.

I`m coding on a Mac Book with BigSure … CPU M1.
I tested all on iPhone and iPad Pro and also emulate iOS. All was fine.

Then I tried to install and setup Android Studio … its working, but not able to run AVD … “AVD could not start”
As far I read, because of M1 CPU.

Building an APK is working … I copy on my tablet, but the maps is always white.

This I have on my iOS when:

<ion-content [fullscreen]="true">

  <div id="map_canvas" *ngIf="isListView === false"></div>
  <ion-datetime #datePicker hidden pickerFormat="DD MMM, YYYY HH:mm" displayFormat="DD. MM"
    (ionChange)="updatePicker(datePicker.value)" [(ngModel)]="myDate" min="2021" max="2023" minuteValues="0,15,30,45"
    [pickerOptions]="customPickerOptions"></ion-datetime>

  <div id="listView" *ngIf="isListView">
    <ion-searchbar *ngIf></ion-searchbar>

    <ion-item *ngIf>
      <ion-label>Buschenschanktyp wählen</ion-label>
      <ion-select (ionChange)="searchChanged($event)">
        <ion-select-option value="">All</ion-select-option>
        <ion-select-option value="movie">Movie</ion-select-option>
        <ion-select-option value="series">Series</ion-select-option>
        <ion-select-option value="episode">Episode</ion-select-option>
      </ion-select>
    </ion-item>
  
    <div *ngIf="isTablet === false">
    <ion-list *ngFor="let point of poiLocations;  let idx = index" lines="inset">
      <ion-item button (click)="openDetailsAsModal(point.id)">
        <!-- <ion-avatar item-left>
              <img src="https://placehold.it/60?text=A">
            </ion-avatar> -->
        <ion-label>
          <ion-text color="primary">
            <h2>{{point.name}}</h2>
          </ion-text>
          <ion-text color="medium">
            <p style="font-size: 0.8em;">{{point.type}}</p>
          </ion-text>
  
          <ion-chip color="secondary" outline=true>
            <ion-icon name="time" color="primary"></ion-icon>
            <ion-label>{{point.timespan}}</ion-label>
          </ion-chip>
          <ion-chip color="secondary" outline=true>
            <ion-icon name="navigate" color="primary"></ion-icon>
            <ion-label>{{point.distance}} {{point.unit}}</ion-label>
          </ion-chip>
        </ion-label>
      </ion-item>
    </ion-list>
    </div> 
  
    <ion-grid no-margin no-padding *ngIf="isTablet">
      <ion-row no-margin no-padding>
        <ion-col size="12" size-sm="6" *ngFor="let point of poiLocations; let idx = index" style="text-align: left;"
          no-margin no-padding>
          <ion-card (click)="openDetailsAsModal(point.id)" class="card">
            <ion-item color="primary">
              <ion-avatar slot="start">
                <img src="https://via.placeholder.com/300">
              </ion-avatar>
              <ion-label text-wrap>
                <h3>{{point.name}}</h3>
                {{point.type}}
              </ion-label>
            </ion-item>
  
            <ion-card-content>
              <ion-label>{{point.zip}} {{point.city}}</ion-label>
  
              <ion-row>
                <ion-col style="text-align: center;">
                  <ion-chip color="secondary" outline=true>
                    <ion-icon name="time" color="primary"></ion-icon>
                    <ion-label>{{point.timespan}}</ion-label>
                  </ion-chip>
                </ion-col>
                <ion-col cstyle="text-align: center;">
                  <ion-chip color="secondary" outline=true>
                    <ion-icon name="navigate" color="primary"></ion-icon>
                    <ion-label>{{point.distance}} {{point.unit}}</ion-label>
                  </ion-chip>
                </ion-col>
              </ion-row>
            </ion-card-content>
  
            <ion-footer>
  
            </ion-footer>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
    
  </div>

</ion-content>

#map_canvas {
  width: 100%;
  height: 100%;
  margin: 0px !important;
  padding: 0px !important;
  --background: transparent;
}

I hide the map and show a list of all restaurants:

  toggleMapList() {
    if (this.isListView) {
      this.isListView = false;
      const btnListView = document.getElementById('btnListView');
      btnListView.classList.remove('ion-color-danger');
      btnListView.classList.add('ion-color-light');
      this.listFill = 'outline';
    } else {
      this.isListView = true;
      const btnListView = document.getElementById('btnListView');
      btnListView.classList.remove('ion-color-light');
      btnListView.classList.add('ion-color-danger');
      this.listFill = 'solid';
      this.loadMap();
    }
  }

  // ... load map
  async loadMap() {
    console.log('### loading map ###');
    this.map = GoogleMaps.create('map_canvas', {
      camera: {
        target: { lat: this.myLat, lng: this.myLng },
        zoom: 10,
      },
    });
    this.map.setAllGesturesEnabled(true);
    this.map.setOptions({
      backgroundColor: 'white',
      controls: {
        compass: true,
        myLocationButton: true,
        indoorPicker: true,
        zoom: true // Only for Android
      },
      gestures: {
        scroll: true,
        tilt: true,
        rotate: true,
        zoom: true
      },
    });

    this.map.on(GoogleMapsEvent.MAP_LONG_CLICK).subscribe((latLng) => {
      this.longPressed(latLng);
    });
    console.log('### MAP DONE ###');
    this.reloadMarkers();
  }

and show a MODAL after click on a restaurant:

 async openDetailsAsModal(idx: string) {
    const modal = await this.modalController.create({
      component: PoiDetails,
      componentProps: {
        selId: idx
      }
    });

    modal.onDidDismiss().then((dataReturned) => {
      if (dataReturned !== null) {
        this.dataReturned = dataReturned.data;
        //alert('Modal Sent Data :'+ dataReturned);
      }
    });

    return await modal.present();
  }

and close the modal with:

  async close() {
    const closeModal = 'Modal Closed';
    await this.modalCtr.dismiss(closeModal);
  }

Ihm back in my list and switch back to display the map with:

toggleMapList()

the map is also white.

BUT:
if I toggle again, the map is in iOS shown.

Maybe this is the same issue on Android, which persist always?

1 post - 1 participant

Read full topic