Hi there,
We have an app developed in Ionic 3 and cordova-android@7.0.0. Because of android & IOS requirements, we are trying to upgrade to Ionic 3 & cordova-android@7.0.0 with WKWebview. This required us to upgrade cordova-plugin-googlemaps from 2.1.1 to the latest version (2.4.2).
However, after upgrading the environment, I’m facing white screen instead of google maps. Let me elaborate. My home page loads with google maps perfectly. After that, if I navigate away from home page and return to home page (with google maps), I get a white screen in home page where google maps should be displayed. This used to work fine when I was on cordova-android@7.0.0 and cordova-plugin-googlemaps@2.1.1 with UIWebview.
Strangely, there are no errors thrown in the browser console.
May I know what is going wrong? How can I fix this?
Thank you for your response and sorry for the delay. It took me some time to come up with sample code that recreates the problem.
I’ve created 2 repos. They are:
cordova-android@7.0.0 platform with UIWebview & cordova-plugin-googlemaps@2.1.1. This works fine. I’ve given the installation & recreation instructions in the README file of the repo. This repo is at: https://github.com/id4coding/gmaps211plat700.git
cordova-android@7.0.0 platform with WKWebview & cordova-plugin-googlemaps@2.4.3 (latest). This shows whitescreen once I return to the home page after selecting a location. I’ve given the installation & recreation instructions in the README file of the repo. This repo is at: https://github.com/id4coding/gmapslatest.git
You need to use native plugin AFTERplatform.ready().
So, if I change your src/app/app.component.ts like this, the plugin works fine.
import { Component } from '@angular/core';
import { HomePage } from '../pages/home/home';
import { Platform } from 'ionic-angular';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
// rootPage = HomePage; <-- In order to prevent the native plugin is not found error,
rootPage:any;
constructor(platform: Platform) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.rootPage = HomePage; // <-- load the first page here.
});
}
}
Thanks a lot for your response. I incorporated the above changes. However, the problem persists. Please note that the issue is NOT during the opening of the app. The map loads successfully initially. But, the problem is AFTER you select any location from the drop-down list and the app returns to home page, that the maps displays a white screen.
The exact recreation steps of the maps white screen issue are as follows:
Install & run the app.
Click on “Select a location” textbox to take you to the places page.
Type any location and select any location from the drop-down list.
A white screen is displayed instead of google map of the above selected location. (This was working fine and a google map of the location was getting displayed in version 2.1.1 of the maps plugin)
I’ve cleaned up the code base and the latest commit of the code can be found at the same repository:
This happened to me once. I don’t remember what I exactly did to fix it but this is either some version incompatibility or some other plugin version that is incompatible. One of these might fix your problem:
Check all versions are the same in config.xml, package.json and package-lock.json.
Make sure: your API key is valid.
Make sure that you’re using the SDK dependency, it looks something like: "cordova-plugin-googlemaps-sdk": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git#2.7.0",
Make sure your plugin config matches your needs, this is mine:
<plugin name="cordova-plugin-googlemaps" spec="2.2.2">
<variable name="API_KEY_FOR_ANDROID" value="" />
<variable name="API_KEY_FOR_IOS" value="" />
<variable name="LOCATION_WHEN_IN_USE_DESCRIPTION" value="Show your location on the map" />
<variable name="LOCATION_ALWAYS_USAGE_DESCRIPTION" value="Trace your location on the map" />
<variable name="PLAY_SERVICES_VERSION" value="12.0.0" />
<variable name="ANDROID_SUPPORT_V4_VERSION" value="24.1.0" />
</plugin>
If none of previous worked, try using the version 2.1.2 of cordova-plugin-ionic-webview. I was using a more updated version and I do believe that was my problem.
Okay, I finally reproduce your issue, and figured out the reason.
Because you execute map.animateCamera() while map has been detached.
I don’t remember exactly which version, but after v2.2.x, the maps plugin automatically map.setDiv(null) when the mapDiv is invisible. Invisible means physical invisible, for example, if some other element is displayed over the mapDiv, it is invisible.
Then after the pick up one location from the autocomplete of Google Places Library, you start map.animateCamera() before the maps plugin executes map.setDiv(mapDiv).
That’s why it causes dead lock.
I fixed the problem. Please reinstall the plugin from the multiple_maps branch.
Thank you so much for the fix. Looks like your latest code change fixed the issue we were having with the latest version of google maps plugin in our app.
