Cordova-plugin-googlemaps: Map does not immediately display on cordova-ios@4

[chadwhitaker]

I've noticed that the current master branch does not display the map until the map dom has been "touched"/modified. It will initially load up as a plain white screen.

• cordova-ios@4 (4.1.1)
• tested on an iPhone running iOS v9.3.2

I've created a test repo and replication instructions to help accelerate testing this issue:
https://github.com/chadwhitaker/cordova-plugin-googlemaps_issue-1007

This issue doesn't exist when using the npm version v1.9.3 of the plugin (commit a94ab45) and running cordova-ios with v3.9.2 (cordova platform add ios@3). I imagine lies within the cordova-ios v4 implementation.

Preview of issue

⬇️ Please hit the 👍 if your app is also experiencing this issue.

[wf9a5m75]

Please use the master branch.

[chadwhitaker]

This issue exists in the current master branch. The current npm version loads correctly each time.

[netomia]

I can confirm this with master branch and cordova-ios 4.1.1.

[chadwhitaker]

@netomia Can you confirm if the current npm version running [email protected] will load the map properly?

[netomia]

@chadwhitaker Confirmed. Map loads with:
npm version 1.3.9 of googlemaps
[email protected]
iOS 8.4 (simulator) and 9 (ipad mini and iphone 4s)

[chadwhitaker]

@wf9a5m75 I beleieve this confirms that this issue stemmed from a commit after the current npm version and before the current master branch.

Would you agree?

[wf9a5m75]

I checked your repo, and I could not understand what you pointed out :(
Since I don't have any iOS device right now (leave at home), so I checked your repo with simulator.

I tested both the npm version and the master branch version, but both are the same.

I also suggest you that you should map.setVisible(true/false) instead of changing the div size.

[chadwhitaker]

The iOS simulator produces the same results as an iOS device.

You can see in your attached gif that when the app loads the maps is only displayed as a white block when really the maps should be fully displayed.

It isn't until you modify the #map_canvas div in some way (in this example I move the #map_canvas by 1px when you tap the "Touch" button) before the maps displays on the device.

The current npm version running [email protected] displays the map instantly when the app is loaded.

I attempted to use map.setVisible(true/false) but it did not produce any results.

[chadwhitaker]

I should also note that when running the master branch with cordova-ios@4 with the WKWebView Engine enabled, it appears to load the map correctly every time.

I still haven't found a reason for the map loading up blank when using cordoava-ios@4 with the default UIWebView.

[ddeakes]

Is there any way to fix this yet using cordoava-ios@4?

[wf9a5m75]

use the master branch

[netomia]

@wf9a5m75 this does not work with the master branch and cordova-ios@4.

[ddeakes]

@netomia Is right... I have tried the master branch and the div still loads black until the full screen dialogue is displayed.

[chadwhitaker]

@wf9a5m75 I still believe there's a misunderstanding about this issue.

While the master branch does support a cordova-ios v4 build. The master branch does not load the map properly when using cordova-ios@4; the map loads up completely blank.

Can you please reply and confirm you understand the issue?

[mhfen]

@wf9a5m75 I can confirm I'm seeing the same behavior as @chadwhitaker using the Master branch.

This is sporadic and random - there is no definite set of reproducible steps to create the issue, otherwise I'd list them here. Sometimes it loads, sometimes its blank.
There is no error output in the logs, so its impossible to track the issue's source.

[ddeakes]

Has anyone tried updating the Google Maps SDK to the latest?

[chadwhitaker]

I just tried using the latest Google Maps SDK for iOS (`v1.13.2) and it still experiences the same behavior.

[chadwhitaker]

I've proven that this issue exists on a bare bones app via this test repo.

But I wanted to note my findings on my current production app. I'm using the Ionic Framework and it experiences the same issue (blank map on load), but launching a modal will immediately display the map.

📺 https://www.youtube.com/watch?v=5YKSc-bY2rI

From my findings, nothing changes in regards to the injected transparent background setting (background-color: rgba(0,0,0,0)).

I thought I'd include this in the event it helps with debugging.

[chadwhitaker]

I just solved this issue in my production app (an Ionic app).

It appears that Ionic or Cordova injects a .backdrop div at the bottom of the body, but it is fixed and z-indexed above the rest of the content. This .backdrop div didn't get the special background-color: rgba(0,0,0,0) treatment from the cordova-plugin-googlemap plugin causing the map to be hidden.

My current solution is to remove this .backdrop div from the DOM when the app is fully loaded:

var backdrop = document.getElementsByClassName('backdrop')[0];
backdrop.parentNode.removeChild(backdrop);

This still doesn't explain the same issue with my test repo as this Cordova app doesn't contain the .backdrop div but still displays the map as blank on load.

[Hirbod]

This plugin only detects parent-nodes, not absolute or position:fixed elements. Most of the frameworks do inject some DOM-Elements, which are not considered as parent - thus, will not be set to transparent. You'll need to dig into this trough the DOM inspector. I am sure there must be another non-transparent element hiding the map

[chadwhitaker]

@Hirbod Ahh yep. The .backdrop element outlined above is a fixed element.

Thank you for clarifying what was going on here.

[wf9a5m75]

I reproduced this issue a few days ago, and the problem is the UIWebView does not redraw their background until rotate the app.

I tackled this issue, and the final solution is just this code.
https://github.com/mapsplugin/cordova-plugin-googlemaps/blob/master/www/googlemaps-cdv-plugin.js#L292-L293

I think the problem is solved on the new master branch.
If still there, please update with new information.

[chadwhitaker]

@wf9a5m75 I can confirm that your commit fixed my test repo.

However, my production app that uses the Ionic framework requires this hack to display the map properly on load. Obviously, an issue related to the structure of Ionic.

Thanks for your help and for pushes that fix.