Ionic-native-google-maps: White screen first load (Ionic 3 - iOS)

[Nicolas-PL]

I'm submitting a ... (check one with "x")

• [ ] question
• [ X] any problem or bug report
• [ ] feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• [ ] Android
• [X] iOS
• [ ] Browser

cordova information: (run $> cordova plugin list)

cordova-plugin-android-permissions 1.0.0 "Permissions"
cordova-plugin-camera 4.0.1 "Camera"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-file 5.0.0 "File"
cordova-plugin-file-transfer 1.7.0 "File Transfer"
cordova-plugin-fullscreen 1.1.0 "cordova-plugin-fullscreen"
cordova-plugin-geolocation 4.0.1 "Geolocation"
cordova-plugin-googlemaps 2.5.0 "cordova-plugin-googlemaps"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.4.1 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
cordova-sqlite-storage 2.2.0 "Cordova sqlite storage plugin"
ionic-plugin-keyboard 2.2.1 "Keyboard"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)
"@ionic-native/core": "^4.20.0",
"@ionic-native/google-maps": "^4.20.0",

Current behavior:

When i open app for first time i have white screen.

Related code, data or error log (please format your code or data):

map.html :

<ion-content>
  <div id="map_canvas"></div>
</ion-content>

map.scss :

  #map_canvas {
    height: 90%;
  }

map.ts :

  ionViewDidLoad(){
    this.platform.ready().then(() => {
          this.loadMap();
    });
  }

  loadMap(lat = 49, lng = 1, zoom = 10) {
    this.map = GoogleMaps.create('map_canvas');
}

Thanks !

[wf9a5m75]

Check your view background color as transparent, please.

[wf9a5m75]

And you can NOT use this plugin in a modal.

[Nicolas-PL]

@wf9a5m75 I have try :

<ion-content style="background: none transparent;">
  <div id="map_canvas"></div>
</ion-content>

But same problem :/

[wf9a5m75]

If you can't solve your problem, please share your project files on github repository. I will check your code when I am available. Otherwise, since too less information, I can not help you.

[Nicolas-PL]

https://github.com/Nicolas-PL/geodrones/tree/master/src/pages/map

Thanks

[wf9a5m75]

Since there are only limited source files, I can not reproduce your issue.
Tentatively, try to set fixed pixels (height:300px instead of height: 90%;)

[wf9a5m75]

Remember, map is always displayed under the browser.
https://github.com/mapsplugin/cordova-plugin-googlemaps#how-does-this-plugin-work-android-ios

All HTML elements above the map must be transparent.

[Nicolas-PL]

Sorry i have upload all project : https://github.com/Nicolas-PL/geodrones

[wf9a5m75]

I just do git clone and execute it.

[wf9a5m75]

Make sure you install cocoa pod.

$> ionic cordova platform add ios
$> cd platforms/ios
$> pod setup
$> pod install
$> cd ../../
$> ionic cordova run ios

[Nicolas-PL]

But if i display menu the map load :(

[wf9a5m75]

Unfortunately, I can not reproduce your issue.

[francovp]

I have this exact same problem on Ionic 3
What version of Xcode, iOS SDK and ios target are you using both @wf9a5m75 and @Nicolas-PL ?

[Nicolas-PL]

Hi, @francovp

Xcode : Version 10.1
iOS : 12.2 (beta 1)
cordova-ios": "4.5.5"

[Nicolas-PL]

And you @francovp ? (i use iphone x )

[francovp]

@Nicolas-PL
Xcode: 10.1
iOS: 12.1
cordova-ios: 4.5.5

We have the same versions, except iOS SDK, but I don't think that make any difference.

[Nicolas-PL]

Hi, @wf9a5m75 what version of xcode , iOS SDK and ios target are you using ?

[wf9a5m75]

Xcode 10 (with legacy build), iOS 12

[wf9a5m75]

ping

[Nicolas-PL]

Hi,
I still have the problem.. if u want i can send testflight invite ?

[wf9a5m75]

Unfortunately, I'm busy. This project is my hobby, not my job.

Did you update ionic-native/google-maps and cordova-plugin-googlemaps?

[Nicolas-PL]

I have try and same problem :

[wf9a5m75]

Try on a new blank project

[wf9a5m75]

@Nicolas-PL ping

[Nicolas-PL]

Hi, @wf9a5m75

Same problem.. (White screen but if i rotate my phone, the map appears.

[wf9a5m75]

Did you try on a new project?

[wf9a5m75]

ping

[wf9a5m75]

Since there is no response for a while, I close this thread.

[fakerLinXiao]

same bug.
This bug occur only on iOS 12.2

[JulienSDigital]

same here, since the update 12.2, i have a black screen on the shape of the map ( physical device )

I tested on simulator on ios 12.1, it works

[presidentnickson]

same issue here on 12.2 - works fine on 12.1

[tbetous]

same issue here on 12.2 - works fine on 12.1 :/

[Nicolas-PL]

@wf9a5m75 You have try on iOS 12.2 ? I have same problem on 12.2 and 12.3

[trfletch]

I have the same problem on iOS 12.2 on device (iPhone 6S), it works fine in the simulator running iOS 12.1.

The first time the map opens there is a blank screen, the next time the map opens (and any subsequent opens after that) it loads fine.

If I completely close the App then re-open it the problem returns (i.e. only on the first time the map opens).

Also as @Nicolas-PL mentioned if you rotate the device while it is showing the blank screen then the map appears.

[trfletch]

Not sure if this helps anyone debug the problem at all but when using Web Inspector connected to the iPhone, simply changing one of the highlighted values (even just removing the value or changing by 1px) makes the map suddenly appear.

Does anyone know a way of updating one of these values using typescript after the map has loaded as that could be a hack to get around the issue for the time being?

[ThonyFD]

Same problem here, the map only appear after update some css property or trigger any event, i think, it could be related with this Ionic issue with WKWebview on iOS 12.2

[clemishow]

Same issue in IOS 12.2.
Really need a update !

[n0minal]

Same issue on android 8.1 :/

[MichelAmorosa]

Hi @trfletch , did you find a workaround ?

[trfletch]

No not found a workaround, I even tried changing a CSS class on the parent
div dynamically after the map was ready and the CSS change updating the
pseudo “after” value but this didn’t fix the problem (even though it
updated the relevant style). I also tried calling .refreshContent after map
was ready but still didn’t help.

On Fri, 3 May 2019 at 08:18, Michel Amorosa [e-mail]
wrote:

Hi @trfletch https://github.com/trfletch , did you find a workaround ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic-native-google-maps/issues/169#issuecomment-488980005,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACE4HMABJ6LKSN6SOMTWJODPTPRNTANCNFSM4GUPKUNA
.

[MichelAmorosa]

Thank you

[n0minal]

I found the fix: create your map after loading all plugins that requires permissions to the device, like geolocation, etc, I just moved my create map function to below of these functions that asks users for permissions and it worked fine.

[trfletch]

@n0minal Do you have an example of how to do this? I was under the impression all of these load in the app.module.ts and then my map is created in a page called map.ts. The issue also occurs if you close the App completely and re-open it (i.e. even when you do not have to accept the permissions popup because it has already been accepted the first time you opened the App).

[n0minal]

@trfletch this wasn't my case, in my case the issue happens on Android in first load, after restarting the app it works fine. Not sure about iOS cause I didn't compile the app for iOS for now. Your issue happens in both platforms?

[n0minal]

I remember now I have added some style for transparent background stuff on the map page's scss, I will post it here when I get home

[clemishow]

@n0minal can you share your code with us ?

[lolaswift]

Same issue iphone x ios 12.2!
why this thread is closed?

[devneocity]

Same issue in iOS 12.2!
We need a solution please!
Why this thread is closed?

[wf9a5m75]

For the people who has problem. Just saying "Me too" at the closed thread is no sense, because you don't provide any information. Please create a new ticket with valuable information, such as creating test project report.

I have no problem at iOS 12.2.