ERROR: Plugin 'map_0_1298011159248' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml.

Question

ERROR: Plugin 'map_0_1298011159248' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml.

ulver2812 opened this issue 4 years ago · comments

Umberto Russo commented 4 years ago

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

question
any problem or bug report
feature request

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

Android
iOS
Browser

cordova information: (run $> cordova plugin list)

com.googlemaps.ios 3.9.0 "Google Maps SDK for iOS"
cordova-plugin-device 2.0.3 "Device"
cordova-plugin-fcm-with-dependecy-updated 7.1.1 "Cordova FCM Push Plugin"
cordova-plugin-googlemaps 2.8.0-20200709-2008 "cordova-plugin-googlemaps"
cordova-plugin-inappbrowser 4.0.0 "InAppBrowser"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 5.0.0 "cordova-plugin-ionic-webview"
cordova-plugin-network-information 2.0.2 "Network Information"
cordova-plugin-splashscreen 6.0.0 "Splashscreen"
cordova-plugin-statusbar 2.4.3 "StatusBar"
cordova-plugin-whitelist 1.3.4 "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": "^5.27.0",
"@ionic-native/google-maps": "^5.27.0-beta-20200630",
"cordova-plugin-googlemaps": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps.git#multiple_maps",
"cordova-plugin-googlemaps-sdk": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git",

Current behavior:
I migrated an app from ionic 3 to ionic 5, so now I'm using ionic 5 and the map works well in browser but it doesn't work on iOS (13.4.1) I get a grey screen instead of the map.
This is the console log in xcode while the simulator is running:

2020-08-20 12:09:28.788995+0200 AppAgentiMangimiLiverini[13471:133837] ERROR: Plugin 'map_0_867075012460' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml.
2020-08-20 12:09:28.789427+0200 AppAgentiMangimiLiverini[13471:133837] FAILED pluginJSON = ["INVALID","map_0_867075012460","detachFromWebView",[]]
2020-08-20 12:09:28.866537+0200 AppAgentiMangimiLiverini[13471:133837] background = #dfdfdf

The Google API key is correct, it works with the app in ionic 3.

Expected behavior:
That it works on iOS.

Thanks

Masashi Katsumata · Answer 1 · Thu Aug 20 2020 22:05:24 GMT+0800 (China Standard Time)

Please share your project files on GitHub repository.
Too less information

Umberto Russo · Answer 2 · Fri Aug 21 2020 17:42:19 GMT+0800 (China Standard Time)

Hi, thanks for the reply, I found the issue, the maps works well I added this CSS rule in the global.scss file:

ion-content{
--background: #dfdfdf;
}

this rule set the background color correclty but it hide the map. I removed this rule and used this code:

import {Environment} from '@ionic-native/google-maps/ngx';

...

async ngOnInit(){
    await this.platform.ready();
    Environment.setBackgroundColor('#dfdfdf');
    await this.loadMap();
} 

...

but the background remains white, I get this log in the xcode console:

2020-08-21 11:26:58.313932+0200 AppAgentiMangimiLiverini[19520:160445] background = #fff

In Ionic 3 the Environment.setBackgroundColor work well but in Ionic 5 seems to not work, it can be related to the shadow dom?

Masashi Katsumata · Answer 3 · Fri Aug 21 2020 22:04:57 GMT+0800 (China Standard Time)

If you out a map div inside a shadow DOM, plugin can not check inside it.

Umberto Russo · Answer 4 · Fri Aug 21 2020 22:22:40 GMT+0800 (China Standard Time)

My map div is inside an ion-segment, I have a simple page, inside this page there is a ion-segment with the map div within.

When the page is initialized (ngOnInit) I set the background color as the code above.

But this is the normal way to build ionic app in Ionic 5 so I can't understand why the setBackgroundColor is completely ignored.

There's a way to set the default background color as #dfdfdf instead of #ffffff ?

Masashi Katsumata · Answer 5 · Fri Aug 21 2020 22:27:28 GMT+0800 (China Standard Time)

Ah, I see. I got it.
The recent version of this plugin automatically sets the background color of parent elements when you create a map.

So, try to set background color to <body> (for example)

Masashi Katsumata · Answer 6 · Fri Aug 21 2020 22:33:41 GMT+0800 (China Standard Time)

The reason is that most (new) users prefer to use this plugin like a normal HTML map.
So they expects the background color is the same as specified in CSS files.

Picks up background color while the plugin changes the background color as transparent, then uses the last background color

Umberto Russo · Answer 7 · Fri Aug 21 2020 23:00:52 GMT+0800 (China Standard Time)

So, try to set background color to body (for example)

I tried to set this, works in browser but not in iOS:

<body style="background-color: #dfdfdf;">
  <app-root style="background-color: #dfdfdf;"></app-root>
</body>

Picks up background color while the plugin changes the background color as transparent, then uses the last background color

How I can do that? Can you provide an example?

Thanks

Masashi Katsumata · Answer 8 · Fri Aug 21 2020 23:10:57 GMT+0800 (China Standard Time)

Please share your project files on GitHub. I can't see your situation

Umberto Russo · Answer 9 · Fri Aug 21 2020 23:17:47 GMT+0800 (China Standard Time)

Ok, thanks, I will share it on monday, so you can take a look. Thanks a lot, have a nice weekend!

Umberto Russo · Answer 10 · Mon Aug 24 2020 17:22:37 GMT+0800 (China Standard Time)

@wf9a5m75 Hi, I created a private repo and invited you, thanks for the help.
You can find the map code in src/app/pages/home/ but also in other app pages.

Masashi Katsumata · Answer 11 · Mon Aug 24 2020 22:10:24 GMT+0800 (China Standard Time)

Thank you. I will check it out later today

Umberto Russo · Answer 12 · Wed Aug 26 2020 15:34:38 GMT+0800 (China Standard Time)

Hi @wf9a5m75 , any news?

Masashi Katsumata · Answer 13 · Thu Aug 27 2020 10:21:13 GMT+0800 (China Standard Time)

I checked your code, but I can't run it (because there is no login/password information)

As far as I read your code and the error log, the error causes when you changing the pages quickly.

Umberto Russo · Answer 14 · Thu Aug 27 2020 15:45:13 GMT+0800 (China Standard Time)

Hi @wf9a5m75, you can find the login information in the README.md file.

What do you mean with changing the pages quickly, there's a way to slow down the page changing?

Thanks

Umberto Russo · Answer 15 · Thu Aug 27 2020 23:46:44 GMT+0800 (China Standard Time)

The issue may be related to the ion-segment?
All maps in the app are loaded inside an ion-segment.
I'm struggling with this issue by days ... 😩

Masashi Katsumata · Answer 16 · Fri Aug 28 2020 00:14:38 GMT+0800 (China Standard Time)

I haven't tested with ion-segment.
In your code, you try to setVisible when the segment is changed. But the maps plugin should take care automatically.

Please try to comment out map.setVisible. I have my stuff this morning, so I will check your repo in this afternoon when I have a chance

Umberto Russo · Answer 17 · Fri Aug 28 2020 16:40:55 GMT+0800 (China Standard Time)

Please try to comment out map.setVisible

I just tried, the issue persist, I didn't notice differences.

I'm pretty sure that the issue is related to the ion-segment, when you switch the segment something overwrite the Environment.setBackgroundColor('#dfdfdf');

This issue was not present in Ionic 3 segment...

Umberto Russo · Answer 18 · Wed Sep 02 2020 18:58:35 GMT+0800 (China Standard Time)

For whom will incur in the same issue, I found a workaround, the issue is related to the ion-segment, if you put the map within an ion-segment when you switch segment the background color will change to transparent.

So I changed my code in this way:

In the variables.scss I set the ion-background-color

:root {
  --ion-background-color: #dfdfdf;
  ...
}

In the page I used this code

<ion-segment class="clients-segment" [(ngModel)]="view" (ionChange)="onSegmentChange($event)">
       <ion-segment-button value="map">
          <ion-label>Map</ion-label>
       </ion-segment-button>
       <ion-segment-button value="list">
          <ion-label>List</ion-label>
       </ion-segment-button>
</ion-segment>

...

<div [style.display]="view == 'map' ? 'block' : 'none'" id="home_map_wrapper">
     <div id="home_map"></div>
</div>

basically when the segment is changed to list the map wrapper div is set to display: none; while when the segment is changed to map the map wrapper div is set to display: block;

timkovik · Answer 19 · Thu Sep 24 2020 00:02:30 GMT+0800 (China Standard Time)

I have the same problem on ios now: map is working, but i cant scroll it

Masashi Katsumata · Answer 20 · Thu Sep 24 2020 02:12:03 GMT+0800 (China Standard Time)

Please try this

https://www.npmjs.com/package/@ionic-native/google-maps/v/5.27.0-beta-20200630

timkovik · Answer 21 · Tue Sep 29 2020 23:22:42 GMT+0800 (China Standard Time)

Пожалуйста, попробуйте это

https://www.npmjs.com/package/@ionic-native/google-maps/v/5.27.0-beta-20200630

i use it