(Android / iOS) Fix: white map with ionic 4
MODIFY
plugin.xml
plugin.xml
<?xml version='1.0' encoding='utf-8'?>
-<plugin id="cordova-plugin-googlemaps" version="2.5.0-beta-20181009-1018" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
+<plugin id="cordova-plugin-googlemaps" version="2.5.0-beta-20181016-1830" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
<name>cordova-plugin-googlemaps</name>
<js-module name="Promise" src="www/Promise.js" />
<asset src="www/promise-7.0.4.min.js.map" target="promise-7.0.4.min.js.map" />

MODIFY
www/Common.js
www/Common.js
+
var BaseArrayClass = require('./BaseArrayClass');
var utils = require('cordova/utils');
@@ -721,6 +722,47 @@ function createEvent(eventName, properties) {
return evt;
}
+function attachTransparentClass(div) {
+
+ if (div.classList && !div.classList.contains('_gmaps_cdv_')) {
+ div.classList.add('_gmaps_cdv_');
+ } else if (div.className && div.className.indexOf('_gmaps_cdv_') === -1) {
+ div.className = div.className + ' _gmaps_cdv_';
+ }
+
+ if (div.shadowRoot) {
+ var styleAttr = div.getAttribute('style') || '';
+ if (styleAttr && styleAttr.indexOf('--ion-background-color') === -1) {
+ styleAttr = styleAttr + ' --ion-background-color: transparent;';
+ }
+ div.setAttribute('style', styleAttr);
+ }
+}
+// function dettachTransparentClass(root) {
+//
+// if (div.classList && div.classList.contains('_gmaps_cdv_')) {
+// div.classList.remove('_gmaps_cdv_');
+// } else if (div.className && div.className.indexOf('_gmaps_cdv_') === -1) {
+// div.className = div.className.replace('_gmaps_cdv_', '');
+// }
+//
+// var visibilityCSS = getStyle(node, 'visibility');
+// if (getStyle(div, 'background-color') === 'transparent !important') {
+// div.style.backgroundColor = undefined;
+// }
+// if (getStyle(div, 'background') === 'transparent !important') {
+// div.style.backgroundColor = undefined;
+// }
+// if (getStyle(div, 'background-image') === 'transparent !important') {
+// div.style.backgroundImage = undefined;
+// }
+// if (div.shadowRoot) {
+// var hiddenChildren = div.querySelectorAll('*');
+// hiddenChildren = Array.prototype.splice(hiddenChildren, 0);
+// hiddenChildren.forEach(dettachTransparentClass);
+// }
+// }
+
module.exports = {
_clearInternalCache: _clearInternalCache,
_removeCacheById: _removeCacheById,
@@ -742,7 +784,9 @@ module.exports = {
nextTick: nextTick,
getPluginDomId: getPluginDomId,
hashCode: hashCode,
- createEvent: createEvent
+ createEvent: createEvent,
+ //dettachTransparentClass: dettachTransparentClass,
+ attachTransparentClass: attachTransparentClass
};
if (cordova && cordova.platformId === 'browser') {

MODIFY
www/Map.js
www/Map.js
@@ -206,12 +206,8 @@ Map.prototype.getMap = function(meta, div, options) {
while (div.parentNode) {
div.style.backgroundColor = 'rgba(0,0,0,0) !important';
- // prevent multiple readding the class
- if (div.classList && !div.classList.contains('_gmaps_cdv_')) {
- div.classList.add('_gmaps_cdv_');
- } else if (div.className && div.className.indexOf('_gmaps_cdv_') === -1) {
- div.className = div.className + ' _gmaps_cdv_';
- }
+ // Add _gmaps_cdv_ class
+ common.attachTransparentClass(div);
div = div.parentNode;
}
@@ -817,12 +813,8 @@ Map.prototype.setDiv = function(div) {
while (div.parentNode) {
div.style.backgroundColor = 'rgba(0,0,0,0)';
- // prevent multiple readding the class
- if (div.classList && !div.classList.contains('_gmaps_cdv_')) {
- div.classList.add('_gmaps_cdv_');
- } else if (div.className && div.className.indexOf('_gmaps_cdv_') === -1) {
- div.className = div.className + ' _gmaps_cdv_';
- }
+ // Add _gmaps_cdv_ class
+ common.attachTransparentClass(div);
div = div.parentNode;
}

MODIFY
www/StreetViewPanorama.js
www/StreetViewPanorama.js
@@ -130,12 +130,7 @@ StreetViewPanorama.prototype.getPanorama = function(meta, panorama, div, options
while (div.parentNode) {
div.style.backgroundColor = 'rgba(0,0,0,0) !important';
- // prevent multiple readding the class
- if (div.classList && !div.classList.contains('_gmaps_cdv_')) {
- div.classList.add('_gmaps_cdv_');
- } else if (div.className && div.className.indexOf('_gmaps_cdv_') === -1) {
- div.className = div.className + ' _gmaps_cdv_';
- }
+ common.attachTransparentClass(div);
div = div.parentNode;
}

(Android / iOS) Fix: white map with ionic 4
https://github.com/ionic-team/ionic-native-google-maps/issues/94