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';
this.loadMap();
} else {
this.isListView = true;
const btnListView = document.getElementById('btnListView');
btnListView.classList.remove('ion-color-light');
btnListView.classList.add('ion-color-danger');
this.listFill = 'solid';
}
}
// ... 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?
