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

ulver2812 commented 3 years ago

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)

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

wf9a5m75 commented 3 years ago

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

ulver2812 commented 3 years ago

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?

wf9a5m75 commented 3 years ago

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

ulver2812 commented 3 years ago

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 ?

wf9a5m75 commented 3 years ago

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)

wf9a5m75 commented 3 years ago

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

ulver2812 commented 3 years ago

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

wf9a5m75 commented 3 years ago

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

ulver2812 commented 3 years ago

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

ulver2812 commented 3 years ago

@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.

wf9a5m75 commented 3 years ago

Thank you. I will check it out later today

ulver2812 commented 3 years ago

Hi @wf9a5m75 , any news?

wf9a5m75 commented 3 years ago

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.

ulver2812 commented 3 years ago

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

ulver2812 commented 3 years ago

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 ... 😩

wf9a5m75 commented 3 years ago

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

ulver2812 commented 3 years ago

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...

ulver2812 commented 3 years ago

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 commented 3 years ago

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

wf9a5m75 commented 3 years ago

Please try this

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

timkovik commented 3 years ago

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

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

i use it

ionic-team / ionic-native-google-maps

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