Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
2 of 6 tasks
ulver2812 opened this issue Aug 20, 2020 · 21 comments

Comments

@ulver2812
Copy link

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

@wf9a5m75
Copy link
Contributor

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

@ulver2812
Copy link
Author

ulver2812 commented Aug 21, 2020

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
Copy link
Contributor

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

@ulver2812
Copy link
Author

ulver2812 commented Aug 21, 2020

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
Copy link
Contributor

wf9a5m75 commented Aug 21, 2020

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
Copy link
Contributor

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
Copy link
Author

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
Copy link
Contributor

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

@ulver2812
Copy link
Author

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

@ulver2812
Copy link
Author

@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
Copy link
Contributor

Thank you. I will check it out later today

@ulver2812
Copy link
Author

Hi @wf9a5m75 , any news?

@wf9a5m75
Copy link
Contributor

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
Copy link
Author

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
Copy link
Author

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
Copy link
Contributor

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
Copy link
Author

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
Copy link
Author

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
Copy link

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

@wf9a5m75
Copy link
Contributor

@timkovik
Copy link

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

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

i use it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants