Cordova-plugin-googlemaps: the plugin does not ignore the svg elements

[leandroz]

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

cordova information: (run $> cordova plugin list)

com.googlemaps.ios 2.6.0 "Google Maps SDK for iOS"
cordova-custom-config 5.0.1 "cordova-custom-config"
cordova-plugin-add-swift-support 1.7.0 "AddSwiftSupport"
cordova-plugin-device 1.1.7 "Device"
cordova-plugin-dialogs 1.3.4 "Notification"
cordova-plugin-fingerprint-aio 1.3.3 "FingerprintAllInOne"
cordova-plugin-globalization 1.0.8 "Globalization"
cordova-plugin-google-analytics 1.8.3 "Google Universal Analytics Plugin"
cordova-plugin-googlemaps 2.2.5 "cordova-plugin-googlemaps"
cordova-plugin-inappbrowser 1.7.2 "InAppBrowser"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-mauron85-background-geolocation 3.0.0-alpha.14 "CDVBackgroundGeolocation"
cordova-plugin-mfp 8.0.2017102403 "IBM MobileFirst Platform Foundation"
cordova-plugin-mfp-jsonstore 8.0.2017090705 "IBM MobileFirst Platform Foundation JSONStore"
cordova-plugin-mfp-push 8.0.2017112208 "IBM MobileFirst Platform Foundation - Push Notifications"
cordova-plugin-network-information 1.3.4 "Network Information"
cordova-plugin-okhttp 2.0.0 "OkHttp"
cordova-plugin-secure-storage 2.6.8 "SecureStorage"
cordova-plugin-splashscreen 4.1.0 "Splashscreen"
cordova-plugin-statusbar 2.3.0 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-plugin-x-toast 2.6.0 "Toast"
cordova.plugins.diagnostic 3.9.2 "Diagnostic"
ionic-plugin-keyboard 2.2.1 "Keyboard"
mx.ferreyra.callnumber 0.0.2 "Cordova Call Number Plugin"

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": "4.4.0"
"@ionic-native/google-maps": "^4.5.3"

Current behavior:

Expected behavior:
No errors while tracing DOM tree.

Related code, data or error log (please format your code or data):

TypeError: (node.className || "").split is not a function. (In '(node.className || "").split(" ")', '(node.className || "").split' is undefined) shouldWatchByNative — Common.js:257 traceDomTree — googlemaps-cdv-plugin.js:516 (anonymous function) — googlemaps-cdv-plugin.js:315

I have an SVG chart, the SVG chart has inside g and path tags. The problem is that the output of path.className is not a string, it is SVGAnimatedString, which lacks the split method. The same is true for the g tag.

Solution: Update Common.js to include path and g in the ignoreTags.
var ignoreTags = [ "pre", "textarea", "p", "form", "input", "caption", "canvas", "svg", "g", "path" ];
Is there something else to change maybe in googlemaps-cdv-plugins.js ? Maybe doNotTraceTags ?
@wf9a5m75 let me know and I can send a PR.

[leandroz]

@wf9a5m75 PR created:
https://github.com/mapsplugin/cordova-plugin-googlemaps/pull/2118

[wf9a5m75]

In order to reproduce your issue, please share your project files on github.
I don't want to add all SVG tags to ignore list.

[leandroz]

@wf9a5m75 I have already reproduced it and already sent a PR, but I am thinking maybe doing this is better:

if(document.getElementById("el") instanceof SVGElement) { console.log("It's an SVG element"); }
from https://stackoverflow.com/questions/20748836/how-do-i-tell-if-a-dom-element-is-html-or-svg

That way we fix it once and for all the tags.

[wf9a5m75]

Thank you for telling the tip. I inserted the code onto the multiple_maps branch. Please reinstall the plugin from the multiple_maps branch.

[leandroz]

@wf9a5m75 great, are there big differences between master and multiple_maps branch? so I install the plugin from that one instead.

[wf9a5m75]

The multiple_maps branch is for the next version, which includes other fixes.

[leandroz]

Ok great, do you have an idea of the planned release date? just so I know what to do. Thanks again!

[wf9a5m75]

No ETA.