White map or build failed with multiples errors in Ionic 5

Pipouv commented 3 years ago

Hi,

I use this plugin with my Ionic 5 app. Here my ionic info result and environment versions : ionicinfo

Here my package.json : dependencies devDependencies packagejson

Here my different app files : SCSS FILE scss HTML FILE html TS FILE ts1 ts2 ts3 ts4

I tried these different solutions, with and without installed also cordova-plugin-googlemaps-sdk :

Install cordova-plugin-googlemaps on "github:mapsplugin/cordova-plugin-googlemaps#918eb5a1bfce9595e922b3ad2442ff81cb9a0fa0" (build failed)
Install cordova-plugin-googlemaps on 2.7.1 version (build success but white map)
Install cordova-plugin-googlemaps on "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git" (build failed)
Install cordova-plugin-googlemaps on "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git#multiple_maps" (build success but white map)
Install cordova-plugin-googlemaps on "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git#0b8ea76ad34fb2a202a9de1b9d0e051a82ad9443" (build success but white map)

Here you can see errors in console when build failed : failed

For more details, I already worked with googlemaps-cordova-plugin in Ionic v3 without problem.

I added in my index.html this line : <script async defer src="https://maps.googleapis.com/maps/api/js?key=MYKEY&v=3.exp&libraries=places"></script>

I added in my config.xml these lines : <preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="MYKEY" /> <preference name="GOOGLE_MAPS_IOS_API_KEY" value="MYKEY" />

Finally, I have a question... Here https://github.com/mapsplugin/cordova-plugin-googlemaps the documentation indicate that in v2.7.0 :

Re-adoption: cordova-plugin-googlemaps-sdk dependency

So... We must also download cordova-plugin-googlemaps-sdk on project or not ?

Thank all for your replies...!

me-to-you93 commented 2 years ago

Hello, I had the same problem here, worked on this for days. I finally resolved it removing cordova-androidx-build plugin : cordova plugin rm cordova-androidx-build

Also, you should copy text error instead of images, as this topic is not referenced in searches from error messages.

Pipouv commented 2 years ago

Hi ! Ok, I will try this tomorow. Which branch of plugin did you use ?

You're right, next time I will write error in text and not image for SEO.

Thank you, I say you tomorow after test if it's ok or not.

me-to-you93 commented 2 years ago

I used https://github.com/mapsplugin/cordova-plugin-googlemaps.git#0b8ea76ad34fb2a202a9de1b9d0e051a82ad9443 for the white map fix, which works ! I wonder if this plugin is still maintained ...

jhonnathanH commented 2 years ago

@me-to-you93 can you share your package.json / config.xml i have the same issue but i cant build successfully

me-to-you93 commented 2 years ago

Here are my dependencies :

"dependencies": { "@angular-builders/custom-webpack": "^12.1.1", "@angular/common": "^12.2.3", "@angular/compiler": "^12.2.3", "@angular/core": "^12.2.3", "@angular/forms": "^12.2.3", "@angular/platform-browser": "^12.2.3", "@angular/platform-browser-dynamic": "^12.2.3", "@angular/router": "^12.2.3", "@awesome-cordova-plugins/background-geolocation": "^5.37.3", "@awesome-cordova-plugins/core": "^5.37.3", "@awesome-cordova-plugins/geolocation": "^5.37.3", "@ionic-native/app-version": "^5.36.0", "@ionic-native/background-mode": "^5.15.1", "@ionic-native/camera": "^5.36.0", "@ionic-native/core": "^5.36.0", "@ionic-native/device": "^5.36.0", "@ionic-native/diagnostic": "^5.36.0", "@ionic-native/file": "^5.36.0", "@ionic-native/file-path": "^5.36.0", "@ionic-native/google-maps": "^5.5.0", "@ionic-native/in-app-browser": "^5.36.0", "@ionic-native/insomnia": "^5.36.0", "@ionic-native/is-debug": "^5.36.0", "@ionic-native/network": "^5.36.0", "@ionic-native/splash-screen": "^5.36.0", "@ionic-native/sqlite": "^5.36.0", "@ionic-native/status-bar": "^5.36.0", "@ionic/angular": "^5.9.1", "@ionic/core": "^5.6.14", "@ngx-translate/core": "^13.0.0", "@ngx-translate/http-loader": "^6.0.0", "@turf/turf": "^5.1.6", "ajv": "6.9.1", "buffer": "^6.0.3", "cordova-plugin-app-version": "^0.1.12", "cordova-plugin-background-mode": "^0.7.3", "cordova-plugin-device": "^2.0.3", "cordova-plugin-file": "^6.0.2", "cordova-plugin-filepath": "^1.6.0", "cordova-plugin-inappbrowser": "^5.0.0", "cordova-plugin-insomnia": "^4.3.0", "cordova-plugin-ionic-keyboard": "^2.2.0", "cordova-plugin-ionic-webview": "^5.0.0", "cordova-plugin-is-debug": "^1.0.0", "cordova-plugin-network-information": "^3.0.0", "cordova-plugin-splashscreen": "^6.0.0", "cordova-plugin-statusbar": "^2.4.2", "core-js": "^3.16.4", "guid-typescript": "^1.0.9", "martinez-polygon-clipping": "^0.5.0", "moment": "^2.24.0", "rxjs": "^6.6.7", "rxjs-compat": "^6.5.3", "tslib": "^2.0.0", "typeorm": "0.2.30", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-builders/dev-server": "^7.3.1", "@angular-devkit/architect": "^0.1200.5", "@angular-devkit/build-angular": "^12.2.3", "@angular-devkit/build-webpack": "0.1202.3", "@angular-devkit/core": "^12.2.3", "@angular/cli": "^12.2.3", "@angular/compiler-cli": "^12.2.3", "@angular/language-service": "^12.2.3", "@babel/core": "^7.15.0", "@babel/preset-env": "^7.15.0", "@ionic/angular-toolkit": "^4.0.0", "@ionic/lab": "^3.2.10", "@mauron85/cordova-plugin-background-geolocation": "^3.1.0", "@ngtools/webpack": "12.2.3", "@types/jasmine": "~3.6.0", "@types/jasminewd2": "~2.0.3", "@types/node": "^16.7.6", "babel-loader": "^8.2.2", "babel-plugin-transform-remove-console": "^6.9.4", "cordova-android": "~10.1.1", "cordova-androidx-build": "^1.0.4", "cordova-plugin-androidx-adapter": "^1.1.3", "cordova-plugin-camera": "^6.0.0", "cordova-plugin-geolocation": "^4.1.0", "cordova-plugin-googlemaps": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps.git#0b8ea76ad34fb2a202a9de1b9d0e051a82ad9443", "cordova-sqlite-storage": "^6.0.0", "eslint": "^7.32.0", "jasmine-core": "^3.10.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~6.3.0", "karma-chrome-launcher": "^3.1.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~4.0.1", "karma-jasmine-html-reporter": "^1.7.0", "path": "^0.12.7", "protractor": "~7.0.0", "puppeteer": "^10.0.0", "shelljs": "^0.8.4", "sql.js": "^1.1.0", "ts-node": "~7.0.0", "typescript": "^4.3.5", "webpack": "5.50.0", "webpack-dev-middleware": "5.0.0", "webpack-dev-server": "3.11.2", "webpack-merge": "5.8.0", "webpack-subresource-integrity": "1.5.2" }

Removing androix-build plugin should do the trick.

Pipouv commented 2 years ago

Hi,

I tried to remove cordova-androidx-build plugin, but it did not work. After that, I tried to change cordova-plugin-googlemaps version (I use #multiple_maps branch and you use #0b8ea76ad34fb2a202a9de1b9d0e051a82ad9443 brand), but it did not work. Finally, I tried to remove cordova-plugin-googlemaps-sdk because I saw you did not have this plugin in your package.json but it still does not work.

When I say "did not work", I mean I have a white screen but a build successful. No error in console.

If you have others advice...

jhonnathanH commented 2 years ago

Me too, i failed and all that version/configurations and more. i get couple more days if not worked, y will change to Capacitor or something else

me-to-you93 commented 2 years ago

For me I removed this plugin and it works now everytime. In my case, #multiple_maps was building but with the maps bug, and #0b8ea76ad34fb2a202a9de1b9d0e051a82ad9443 was not building. After removing androidx-build, #0b8ea76ad34fb2a202a9de1b9d0e051a82ad9443 built and the maps bug was resolved.

Maybe you could try a ionic repair ?

jhonnathanH commented 2 years ago

the problem no it's the build, its the white screen in map. with #0b8ea76ad34fb2a202a9de1b9d0e051a82ad9443 build successfully... but the map still its white

me-to-you93 commented 2 years ago

This is strange, for me this PR fixed the white map problem. You could try to remove your node_modules and npm i again, and/or try removing plugin and reinstalling the fix again

Pipouv commented 2 years ago

I tried a ionic repair command but it still does not work. It's very strange because when I uninstall cordova-androidx-build plugin, I must use --force option because I have an alert who say "cordova-androidx-build is use by cordova-plugin-googlemaps to work".

@me-to-you93 I think you can't pass on capacitor because cordova-plugin-googlemaps is not supported by capacitor (only in cordova), so same problem in our case.

So now I have :

0b8ea76ad34fb2a202a9de1b9d0e051a82ad9443 branch
build successfuly
uninstall cordova-androidx-build and cordova-plugin-googlemaps-sdk plugins
try ionic repair command
try remove plugins / platform / node_modules and reinstall all
nothing in console (no errors)
white map

I'm so confused... I don't know if the problem arise from plugins versions or plugins conflicts, way to display map on my page or other...

@me-to-you93 can you share your method to display map on your page please ?

Pipouv commented 2 years ago

You can see my logs when I running my app on my android in Android Studio (I juste replace app ID by XXXXXXX to keep anonymous) :

V/FA: Logging screen view with name, class: PageCarte, MainActivity E/sqlite3_android: ONEPLUS_NAME_PARTS_MATCH SQLITE_OK V/FA: Connecting to remote service E/sqlite3_android: ONEPLUS_NAME_PARTS_MATCH SQLITE_OK V/FA: Connection attempt already in progress Recording user engagement, ms: 8252 Connection attempt already in progress D/FA: Connected to remote service V/FA: Processing queued up service tasks: 3 E/sqlite3_android: ONEPLUS_NAME_PARTS_MATCH SQLITE_OK D/SERVER: Handling local request: http://localhost/12.js E/sqlite3_android: ONEPLUS_NAME_PARTS_MATCH SQLITE_OK D/SERVER: Handling local request: http://localhost/svg/list-outline.svg D/SERVER: Handling local request: http://localhost/assets/icon/favicon.png D/SERVER: Handling local request: http://localhost/svg/close.svg I/Google Maps Android API: Google Play services package version: 214815037 Google Play services maps renderer version(legacy): 203115000 E/e.ville.app.al: Invalid ID 0x00000000. I/chatty: uid=10748(XXXXXXX) identical 11 lines E/e.ville.app.al: Invalid ID 0x00000000. D/OpScreenModeManager: setRefreshRate view com.google.maps.api.android.lib6.gmm6.api.ac{a50ef40 VFED..C.. ......I. 0,0-0,0} viewRate 0 width 0 height 0 D/OpScreenModeManager: create mRatio 1.2 D/OpScreenModeManager: setRefreshRate parent android.widget.FrameLayout{813cf3b V.E...... ......ID 0,0-1080,1867} parent width 1080 parent height 1867 mRatio 1.2 setRefreshRate view com.google.maps.api.android.lib6.gmm6.api.ac{a50ef40 VFED..C.. ......ID 0,0-1080,1867} viewRate 1 width 1080 height 1867 setRefreshRate token android.os.BinderProxy@bc86e26 rate 1 mCurrentRate 0 tmpRate:2 D/OpScreenModeManager: updateScenario fullScreen 1 I/bf: Successfully registered with Phenotype. W/DisplayEventDispatcher: dispatcher 0xb400007a48cf8e30 ~ ignoring unknown event type 0x6d746f6e W/DisplayEventDispatcher: dispatcher 0xb4000079f8cdf750 ~ ignoring unknown event type 0x6d746f6e W/DynamiteModule: Local module descriptor class for com.google.android.gms.googlecertificates not found. I/DynamiteModule: Considering local module com.google.android.gms.googlecertificates:0 and remote module com.google.android.gms.googlecertificates:6 Selected remote version of com.google.android.gms.googlecertificates, version >= 6 W/ProtoDataStoreFlagStore: Unable to retrieve flag snapshot for com.google.android.libraries.consentverifier#XXXXXXX, using defaults. W/ProtoDataStoreFlagStore: Unable to update local snapshot for com.google.android.libraries.consentverifier#XXXXXXX, may result in stale flags. java.util.concurrent.ExecutionException: java.lang.SecurityException: GoogleCertificatesRslt: Package signed with unknown certificate (go/gsrlt) at age.s(:com.google.android.gms.dynamite_mapsdynamite@214815081@21.48.15 (150400-0):3) at age.get(:com.google.android.gms.dynamite_mapsdynamite@214815081@21.48.15 (150400-0):2) at aii.a(:com.google.android.gms.dynamite_mapsdynamite@214815081@21.48.15 (150400-0):1) at aho.g(:com.google.android.gms.dynamite_mapsdynamite@214815081@21.48.15 (150400-0):1) at wn.d(:com.google.android.gms.dynamite_mapsdynamite@214815081@21.48.15 (150400-0):1) at xu.run(:com.google.android.gms.dynamite_mapsdynamite@214815081@21.48.15 (150400-0):0) at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:462) at java.util.concurrent.FutureTask.run(FutureTask.java:266) at java.util.concurrent.ScheduledThreadPoolExecutor$ScheduledFutureTask.run(ScheduledThreadPoolExecutor.java:301) at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167) at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641) at java.lang.Thread.run(Thread.java:923) Caused by: java.lang.SecurityException: GoogleCertificatesRslt: Package signed with unknown certificate (go/gsrlt) at android.os.Parcel.createExceptionOrNull(Parcel.java:2373) at android.os.Parcel.createException(Parcel.java:2357) at android.os.Parcel.readException(Parcel.java:2340) at android.os.Parcel.readException(Parcel.java:2282) at dx.aZ(:com.google.android.gms.dynamite_mapsdynamite@214815081@21.48.15 (150400-0):2) at ql.a(:com.google.android.gms.dynamite_mapsdynamite@214815081@21.48.15 (150400-0):4) at id.e(:com.google.android.gms.dynamite_mapsdynamite@214815081@21.48.15 (150400-0):2) at jc.t(:com.google.android.gms.dynamite_mapsdynamite@214815081@21.48.15 (150400-0):2) at jc.u(:com.google.android.gms.dynamite_mapsdynamite@214815081@21.48.15 (150400-0):3) at jc.e(:com.google.android.gms.dynamite_mapsdynamite@214815081@21.48.15 (150400-0):2) at jg.handleMessage(:com.google.android.gms.dynamite_mapsdynamite@214815081@21.48.15 (150400-0):69) at android.os.Handler.dispatchMessage(Handler.java:102) at android.os.Looper.loop(Looper.java:233) at android.os.HandlerThread.run(HandlerThread.java:67)

me-to-you93 commented 2 years ago

In my case, the #0b8ea76ad34fb2a202a9de1b9d0e051a82ad9443 branch did not build successfully till I remove cordova-androidx-build, this on all machines. It seems different for you. My method for instanciating is basic, almost the one of tutorials.

Have you migrated your @ionic-native geolocation like me ? "@awesome-cordova-plugins/background-geolocation": "^5.37.3", "@awesome-cordova-plugins/core": "^5.37.3", "@awesome-cordova-plugins/geolocation": "^5.37.3",

Pipouv commented 2 years ago

I will try to build my project on a different laptop.

But I don't have same @ionic-native geolocation plugins like you (if you look package.json in my first message), but I also will try to change and upgrade all.

me-to-you93 commented 2 years ago

Yes, for Ionic-native update see https://ionicframework.com/blog/a-new-chapter-for-ionic-native/

me-to-you93 commented 2 years ago

I also have <preference name="AndroidXEnabled" value="false" /> in my config.xml

Pipouv commented 2 years ago

I tried to change AndroidXEnabled to false (before true) but map is still white.

So I'm trying to :

pass Angular v11 to v13
pass ionic v5 to v6
change @ionic to @awesome (by your link and ionic documentation)

Currently, I have some errors when I'm adding platform or build. WIP, I tell you when I solve my problem but the error appear after added @awesome...

jhonnathanH commented 2 years ago

@Pipouv Could you fix the map?

Pipouv commented 2 years ago

Unfortunately not...

tomek-em commented 2 years ago

I had the same problem. Try this:

cordova plugin add https://github.com/kaddyadriano/cordova-plugin-googlemaps.git#PR-Android10-Blank-Screen-Fix-and-Custom-Icons-Fix
cordova platform rm android
remove all plugins from /plugins , remove package-lock.json and /node_modules as well
npm install
cordova platform add android@10.1.0

I didn't need to remove cordova-androidx-build

ashu-lt commented 2 years ago

HI,

Is anyone able to solve this issue? I am trying to integrate the map into the Ionic 6 application. I tried every solution given but still got the white screen.

I am attaching the Screenshot for my app's "Ionic Info".

mapsplugin / cordova-plugin-googlemaps

White map or build failed with multiples errors in Ionic 5 #2894

0b8ea76ad34fb2a202a9de1b9d0e051a82ad9443 branch