search

ionic-team / ionic-native-google-maps

Google maps plugin for Ionic Native
Other
221 stars 125 forks source link

Google map not shown on ios device 12.2 #213

Closed lolaswift closed 5 years ago

lolaswift commented 5 years ago

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

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

cordova information: (run $> cordova plugin list) 

com.googlemaps.ios 2.7.0 "Google Maps SDK for iOS"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-googlemaps 2.3.6 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.0.1 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"

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.21.0",

Current behavior: Google map not shown on ios device 12.2 (i use iphone x for testing)

It works fine on other versions. It works fine on simulators. it works fine on android.

Expected behavior: Google map should show on ios device 12.2

Screen capture or video record:

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

https://github.com/lolaswift/Debugging.git
lolaswift commented 5 years ago

I tried the latest version of the plugin. same issue.

Itokoyamato commented 5 years ago

I was just about to post an issue with reproduction case and fixes I guess I'll just post here instead

I've tested several versions on a blank ionic 3 project, the issue appears to be solved from v2.5.1 and above, I could not reproduce it past that. But from 2.5.0 and below, the issue seems to be happening. (we run 2.2.8 on our apps) Sometimes a white screen, sometimes a black screen on some plugin versions.

If you cannot update the plugin, the following workaround fixed the issue for us:

this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {
        document.body.style.transform = 'rotateZ(0deg)';
});

In typical iOS fashion, (I had to do a similar thing for other ionic issues) you have to apply a CSS property that uses hardware acceleration to trigger some sort of hardware update. Seems to work in this case too.

lolaswift commented 5 years ago

I was just about to post an issue with reproduction case and fixes I guess I'll just post here instead

I've tested several versions on a blank ionic 3 project, the issue appears to be solved from v2.5.1 and above, I could not reproduce it past that. But from 2.5.0 and below, the issue seems to be happening. (we run 2.2.8 on our apps) Sometimes a white screen, sometimes a black screen on some plugin versions.

If you cannot update the plugin, the following workaround fixed the issue for us:

this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {
        document.body.style.transform = 'rotateZ(0deg)';
});

In typical iOS fashion, (I had to do a similar thing for other ionic issues) you have to apply a CSS property that uses hardware acceleration to trigger some sort of hardware update. Seems to work in this case too.

I will try version 2.5.1 above to see if it is solved. Millions of thanks for the workaround, it works in my case as well.

nombrekeff commented 5 years ago

I'm having the same issue, will try your workaround. It happens on v2.6.2 for me.

nombrekeff commented 5 years ago

Workaround is not working for me... in version v2.6.2, i will check with 2.5.1 and see

trfletch commented 5 years ago

Workaround is working for me running cordova-plugin-googlemaps 2.4.6. I was seeing white screen on the first load of the map but subsequent loads worked fine, it now loads first time with no problems.

nombrekeff commented 5 years ago

Okey, thanks I will try this an let you guys know if it works for me!

nombrekeff commented 5 years ago

I finally got it working after much trial and error.
In the end what did it for me was updating cordova-ios to 5.0.0, add the api keys as preferences not plugin variables, then remove folders platforms, plugins, www and then added platform cordova-ios@5.0.0 again:

<widget>
...
    <preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="(api key)" />
    <preference name="GOOGLE_MAPS_IOS_API_KEY" value="(api key)" />
...
</widget>

This are the versions I use:

Additional info

Referencing what Itokoyamato said:

this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => { document.body.style.transform = 'rotateZ(0deg)'; });

I did not need to make use of any hardware acceleration to trigger any sort of hardware update so maybe this issue was just with a specific version.

Here is my package.json in case it helps anyone:

...
"dependencies": {
    "@angular/cdk": "^5.2.4",
    "@angular/common": "5.0.1",
    "@angular/compiler": "5.0.1",
    "@angular/compiler-cli": "5.0.1",
    "@angular/core": "5.0.1",
    "@angular/forms": "5.0.1",
    "@angular/http": "5.0.1",
    "@angular/material": "^5.2.4",
    "@angular/platform-browser": "5.0.1",
    "@angular/platform-browser-dynamic": "5.0.1",
    "@ionic-native/android-permissions": "^4.5.2",
    "@ionic-native/app-version": "^4.15.0",
    "@ionic-native/barcode-scanner": "^4.4.2",
    "@ionic-native/camera": "^4.3.3",
    "@ionic-native/clipboard": "^4.5.2",
    "@ionic-native/contacts": "^4.5.3",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/deeplinks": "^4.5.3",
    "@ionic-native/diagnostic": "^4.7.0",
    "@ionic-native/file": "^4.19.0",
    "@ionic-native/geolocation": "^4.5.2",
    "@ionic-native/google-maps": "^4.8.2",
    "@ionic-native/image-picker": "^4.19.0",
    "@ionic-native/image-resizer": "^4.7.0",
    "@ionic-native/in-app-browser": "^4.11.0",
    "@ionic-native/keyboard": "^4.7.0",
    "@ionic-native/native-geocoder": "^4.5.3",
    "@ionic-native/native-page-transitions": "^4.7.0",
    "@ionic-native/nfc": "^4.5.2",
    "@ionic-native/qr-scanner": "^4.4.2",
    "@ionic-native/sim": "^4.5.3",
    "@ionic-native/sms": "^4.7.0",
    "@ionic-native/social-sharing": "^4.5.2",
    "@ionic-native/spinner-dialog": "^4.5.2",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "^2.1.3",
    "@ngx-translate/core": "^8.0.0",
    "@ngx-translate/http-loader": "^2.0.0",
    "@techiediaries/ngx-qrcode": "0.0.5",
    "android-versions": "^1.3.0",
    "com.telerik.plugins.nativepagetransitions": "^0.6.5",
    "cordova-android": "6.4.0",
    "cordova-android-support-gradle-release": "^1.4.7",
    "cordova-clipboard": "^1.2.1",
    "cordova-ios": "5.0.0",
    "cordova-plugin-add-swift-support": "^1.7.1",
    "cordova-plugin-android-permissions": "^1.0.0",
    "cordova-plugin-app-version": "^0.1.9",
    "cordova-plugin-camera": "^3.0.0",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-contacts": "^3.0.1",
    "cordova-plugin-device": "^1.1.7",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-geolocation": "^3.0.0",
    "cordova-plugin-googlemaps": "^2.6.2",
    "cordova-plugin-googlemaps-sdk": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git#2.7.0",
    "cordova-plugin-image-picker": "git+https://github.com/shaik305/cordova-plugin-image-picker.git",
    "cordova-plugin-inappbrowser": "^3.0.0",
    "cordova-plugin-ionic-webview": "^1.2.1",
    "cordova-plugin-ios-camera-permissions": "^1.2.0",
    "cordova-plugin-ios-contacts-permissions": "^1.0.0",
    "cordova-plugin-native-spinner": "^1.1.3",
    "cordova-plugin-nativegeocoder": "^2.0.5",
    "cordova-plugin-sim": "^1.3.3",
    "cordova-plugin-splashscreen": "^4.1.0",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-plugin-x-socialsharing": "^5.4.4",
    "cordova-sqlite-storage": "^2.6.0",
    "es6-promise-plugin": "^4.2.2",
    "font-awesome": "4.7.0",
    "image-compressor.js": "^1.1.3",
    "info.protonet.imageresizer": "^0.1.1",
    "ionic-angular": "3.9.2",
    "ionic-plugin-deeplinks": "^1.0.19",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "minimist": "^1.2.0",
    "ng2-bootstrap": "^1.6.3",
    "ngx-qrcode2": "0.0.5",
    "ngx-qrcode3": "^0.3.0",
    "node-sass": "^4.11.0",
    "phonegap-plugin-barcodescanner": "^7.1.2",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "ws": "^3.3.2",
    "xml2js": "^0.4.19",
    "zone.js": "0.8.18"
},
...
lolaswift commented 5 years ago

I finally got it working after much trial and error. In the end what did it for me was updating cordova-ios to 5.0.0, add the api keys as preferences not plugin variables, then remove folders platforms, plugins, www and then added platform cordova-ios@5.0.0 again:

<widget>
...
    <preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="(api key)" />
    <preference name="GOOGLE_MAPS_IOS_API_KEY" value="(api key)" />
...
</widget>

This are the versions I use:

* cordova-plugin-googlemaps: `^2.6.2`

* cordova-plugin-googlemaps-sdk: `git+[https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git#2.7.0``](https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git#2.7.0%60%60)

* @ionic-native/google-maps: `^4.8.2`

Additional info

Referencing what Itokoyamato said:

this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => { document.body.style.transform = 'rotateZ(0deg)'; });

I did not need to make use of any hardware acceleration to trigger any sort of hardware update so maybe this issue was just with a specific version.

Here is my package.json in case it helps anyone:

...
"dependencies": {
    "@angular/cdk": "^5.2.4",
    "@angular/common": "5.0.1",
    "@angular/compiler": "5.0.1",
    "@angular/compiler-cli": "5.0.1",
    "@angular/core": "5.0.1",
    "@angular/forms": "5.0.1",
    "@angular/http": "5.0.1",
    "@angular/material": "^5.2.4",
    "@angular/platform-browser": "5.0.1",
    "@angular/platform-browser-dynamic": "5.0.1",
    "@ionic-native/android-permissions": "^4.5.2",
    "@ionic-native/app-version": "^4.15.0",
    "@ionic-native/barcode-scanner": "^4.4.2",
    "@ionic-native/camera": "^4.3.3",
    "@ionic-native/clipboard": "^4.5.2",
    "@ionic-native/contacts": "^4.5.3",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/deeplinks": "^4.5.3",
    "@ionic-native/diagnostic": "^4.7.0",
    "@ionic-native/file": "^4.19.0",
    "@ionic-native/geolocation": "^4.5.2",
    "@ionic-native/google-maps": "^4.8.2",
    "@ionic-native/image-picker": "^4.19.0",
    "@ionic-native/image-resizer": "^4.7.0",
    "@ionic-native/in-app-browser": "^4.11.0",
    "@ionic-native/keyboard": "^4.7.0",
    "@ionic-native/native-geocoder": "^4.5.3",
    "@ionic-native/native-page-transitions": "^4.7.0",
    "@ionic-native/nfc": "^4.5.2",
    "@ionic-native/qr-scanner": "^4.4.2",
    "@ionic-native/sim": "^4.5.3",
    "@ionic-native/sms": "^4.7.0",
    "@ionic-native/social-sharing": "^4.5.2",
    "@ionic-native/spinner-dialog": "^4.5.2",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "^2.1.3",
    "@ngx-translate/core": "^8.0.0",
    "@ngx-translate/http-loader": "^2.0.0",
    "@techiediaries/ngx-qrcode": "0.0.5",
    "android-versions": "^1.3.0",
    "com.telerik.plugins.nativepagetransitions": "^0.6.5",
    "cordova-android": "6.4.0",
    "cordova-android-support-gradle-release": "^1.4.7",
    "cordova-clipboard": "^1.2.1",
    "cordova-ios": "5.0.0",
    "cordova-plugin-add-swift-support": "^1.7.1",
    "cordova-plugin-android-permissions": "^1.0.0",
    "cordova-plugin-app-version": "^0.1.9",
    "cordova-plugin-camera": "^3.0.0",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-contacts": "^3.0.1",
    "cordova-plugin-device": "^1.1.7",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-geolocation": "^3.0.0",
    "cordova-plugin-googlemaps": "^2.6.2",
    "cordova-plugin-googlemaps-sdk": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git#2.7.0",
    "cordova-plugin-image-picker": "git+https://github.com/shaik305/cordova-plugin-image-picker.git",
    "cordova-plugin-inappbrowser": "^3.0.0",
    "cordova-plugin-ionic-webview": "^1.2.1",
    "cordova-plugin-ios-camera-permissions": "^1.2.0",
    "cordova-plugin-ios-contacts-permissions": "^1.0.0",
    "cordova-plugin-native-spinner": "^1.1.3",
    "cordova-plugin-nativegeocoder": "^2.0.5",
    "cordova-plugin-sim": "^1.3.3",
    "cordova-plugin-splashscreen": "^4.1.0",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-plugin-x-socialsharing": "^5.4.4",
    "cordova-sqlite-storage": "^2.6.0",
    "es6-promise-plugin": "^4.2.2",
    "font-awesome": "4.7.0",
    "image-compressor.js": "^1.1.3",
    "info.protonet.imageresizer": "^0.1.1",
    "ionic-angular": "3.9.2",
    "ionic-plugin-deeplinks": "^1.0.19",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "minimist": "^1.2.0",
    "ng2-bootstrap": "^1.6.3",
    "ngx-qrcode2": "0.0.5",
    "ngx-qrcode3": "^0.3.0",
    "node-sass": "^4.11.0",
    "phonegap-plugin-barcodescanner": "^7.1.2",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "ws": "^3.3.2",
    "xml2js": "^0.4.19",
    "zone.js": "0.8.18"
},
...

Thanks a lot for your test result. I will have to stick to my current versions. @Itokoyamato thanks again for your workaround.

cbetz commented 5 years ago

Thank you @nombrekeff that worked for me! I thought I'd tried everything--nuking those folders then adding cordova-ios was the key. One difference is that I'm not using cordova-plugin-googlemaps-sdk

nombrekeff commented 5 years ago

Cool, glad it helped you! I don't actually know why is cordova-plugin-googlemaps-sdk installed, I adopted the project, so I don't know if it's needed for anything...

maxakash commented 5 years ago

I finally got it working after much trial and error. In the end what did it for me was updating cordova-ios to 5.0.0, add the api keys as preferences not plugin variables, then remove folders platforms, plugins, www and then added platform cordova-ios@5.0.0 again:

<widget>
...
    <preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="(api key)" />
    <preference name="GOOGLE_MAPS_IOS_API_KEY" value="(api key)" />
...
</widget>

This are the versions I use:

Additional info

Referencing what Itokoyamato said:

this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => { document.body.style.transform = 'rotateZ(0deg)'; });

I did not need to make use of any hardware acceleration to trigger any sort of hardware update so maybe this issue was just with a specific version.

Here is my package.json in case it helps anyone:

...
"dependencies": {
    "@angular/cdk": "^5.2.4",
    "@angular/common": "5.0.1",
    "@angular/compiler": "5.0.1",
    "@angular/compiler-cli": "5.0.1",
    "@angular/core": "5.0.1",
    "@angular/forms": "5.0.1",
    "@angular/http": "5.0.1",
    "@angular/material": "^5.2.4",
    "@angular/platform-browser": "5.0.1",
    "@angular/platform-browser-dynamic": "5.0.1",
    "@ionic-native/android-permissions": "^4.5.2",
    "@ionic-native/app-version": "^4.15.0",
    "@ionic-native/barcode-scanner": "^4.4.2",
    "@ionic-native/camera": "^4.3.3",
    "@ionic-native/clipboard": "^4.5.2",
    "@ionic-native/contacts": "^4.5.3",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/deeplinks": "^4.5.3",
    "@ionic-native/diagnostic": "^4.7.0",
    "@ionic-native/file": "^4.19.0",
    "@ionic-native/geolocation": "^4.5.2",
    "@ionic-native/google-maps": "^4.8.2",
    "@ionic-native/image-picker": "^4.19.0",
    "@ionic-native/image-resizer": "^4.7.0",
    "@ionic-native/in-app-browser": "^4.11.0",
    "@ionic-native/keyboard": "^4.7.0",
    "@ionic-native/native-geocoder": "^4.5.3",
    "@ionic-native/native-page-transitions": "^4.7.0",
    "@ionic-native/nfc": "^4.5.2",
    "@ionic-native/qr-scanner": "^4.4.2",
    "@ionic-native/sim": "^4.5.3",
    "@ionic-native/sms": "^4.7.0",
    "@ionic-native/social-sharing": "^4.5.2",
    "@ionic-native/spinner-dialog": "^4.5.2",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "^2.1.3",
    "@ngx-translate/core": "^8.0.0",
    "@ngx-translate/http-loader": "^2.0.0",
    "@techiediaries/ngx-qrcode": "0.0.5",
    "android-versions": "^1.3.0",
    "com.telerik.plugins.nativepagetransitions": "^0.6.5",
    "cordova-android": "6.4.0",
    "cordova-android-support-gradle-release": "^1.4.7",
    "cordova-clipboard": "^1.2.1",
    "cordova-ios": "5.0.0",
    "cordova-plugin-add-swift-support": "^1.7.1",
    "cordova-plugin-android-permissions": "^1.0.0",
    "cordova-plugin-app-version": "^0.1.9",
    "cordova-plugin-camera": "^3.0.0",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-contacts": "^3.0.1",
    "cordova-plugin-device": "^1.1.7",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-geolocation": "^3.0.0",
    "cordova-plugin-googlemaps": "^2.6.2",
    "cordova-plugin-googlemaps-sdk": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git#2.7.0",
    "cordova-plugin-image-picker": "git+https://github.com/shaik305/cordova-plugin-image-picker.git",
    "cordova-plugin-inappbrowser": "^3.0.0",
    "cordova-plugin-ionic-webview": "^1.2.1",
    "cordova-plugin-ios-camera-permissions": "^1.2.0",
    "cordova-plugin-ios-contacts-permissions": "^1.0.0",
    "cordova-plugin-native-spinner": "^1.1.3",
    "cordova-plugin-nativegeocoder": "^2.0.5",
    "cordova-plugin-sim": "^1.3.3",
    "cordova-plugin-splashscreen": "^4.1.0",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-plugin-x-socialsharing": "^5.4.4",
    "cordova-sqlite-storage": "^2.6.0",
    "es6-promise-plugin": "^4.2.2",
    "font-awesome": "4.7.0",
    "image-compressor.js": "^1.1.3",
    "info.protonet.imageresizer": "^0.1.1",
    "ionic-angular": "3.9.2",
    "ionic-plugin-deeplinks": "^1.0.19",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "minimist": "^1.2.0",
    "ng2-bootstrap": "^1.6.3",
    "ngx-qrcode2": "0.0.5",
    "ngx-qrcode3": "^0.3.0",
    "node-sass": "^4.11.0",
    "phonegap-plugin-barcodescanner": "^7.1.2",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "ws": "^3.3.2",
    "xml2js": "^0.4.19",
    "zone.js": "0.8.18"
},
...

bro you saved my day. Have been struggling for the last 2 days to make maps work on ios. Cordova-ios was the reason. This plugin requires cordova-ios >= 5.0.0

austinhutchison commented 4 years ago

Just wanted to leave my experience, which is I started experiencing this issue after updating to iOS 12.4 with my Ionic 3 app and using cordova-plugin-googlemaps@2.3.11

After I updated to cordova-plugin-googlemaps@2.5.1 as @Itokoyamato suggested (and fixing the requisite cocoapods issues..) this is now fixed for me. Thank you! Tough problem to google / troubleshoot.