Hi there!
Trying to figure out with android map issue. I have process of creating instance by wrapping steps in ion-slides component inside modal step by step. And one of these steps is selecting location on map. So, when i trying to initialize google map it’s working great, but some reasons native map layer on mobile is showing under all layers of app. So I’ve made couple screen shots from device screen:
And one more where ion-app with opacity: 0
Moreover, I can say that my project working fine, because if i try to set up map on different component, just inside ion-content it works like a charm. Even browser that use JS api - works fine.
So, as I understand this problem: if I try initialize map in ion-slide in modal component, native layer with map are placed behind whole app some reasons. If I try to run same code inside simple page component - it works fine.
Here is map init code, it’s actually pretty simple:
let options: GoogleMapOptions = {
controls: {
compass: true,
myLocation: true,
myLocationButton: true,
mapToolbar: true
},
camera: {
target: {
lat: 56.876059,
lng: 53.210351
},
zoom: 16
}
};
this.map = GoogleMaps.create('g_map', options);
And here is ionic info
Ionic:
ionic (Ionic CLI) : 4.1.2
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.0
Cordova:
cordova (Cordova CLI) : 8.0.0
Cordova Platforms : android 7.0.0, browser 5.0.4, ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.3, (and 13 other plugins)
System:
NodeJS : v10.8.0 (/usr/local/Cellar/node/10.8.0/bin/node)
npm : 2.15.12
OS : macOS High Sierra
Xcode : Xcode 9.4.1 Build version 9F2000
Trying to run this on wileyfox swift 2 with android 7.1.2
P.S. Just have checked ios: there is the same issue, map initialized but layer placed under whole app.