Google Maps JS API will stop working in Cordova in May for iOS+Android

[chandibernier]

Google Maps JS API version 3.53 is the last one to be working in cordova and will stop being available in may (ref: source at the end of this issue). 3.54, 3.55 and 3.56 do not work under Meteor's cordova build (probably because they changed to ES2020 native while Meteor's cordova build is similar to the legacy build)

Error/expected behavior: The map supposed to be displayed is just a white rectangle and the error wee see in JS console is: Uncaught (in promise) TypeError: oda.entries is not a function or its return value is not iterable

Meteor: 2.14 (it does not seem related to Meteor's version but changes in Google Maps)

During our debugging with help from Quave, we understood the issue seems to be in the bundle Meteor builds for Cordova (as opposed to modern-browser bundle).

We figure that out this way: When using our Cordova App in debug using Chrome inspector: A-Using meteor's default cordova bundle, it fails with the error in the console

B-However, if using the same webview, again in the same inspector, to load Meteor's server URL, it loads modern-browser instead of cordova. And in that bundle, it works.

Conclusion of the test: This shows Cordova and the webview are OK and do support Google Maps JS ES2020 API and that Meteor's bundle built for cordova does not support loading dynamically Google Maps JS API.

Steps to reproduce the error and expected behavior: In any Meteor cordova App running on Android (meteor run android-device), you open Chrome Inspector (desktop) and type: A- let aoda=new Map([[1,["msie"]],[2,["edge"]],[3,["chrome","crios"]],[5,["firefox","fxios"]],[4,["applewebkit"]],[6,["trident"]],[7,["mozilla"]]]); for(const [d,e]of aoda.entries()){ console.log('d='+d +' e='+e)}

In Localhost:12490 (cordova/legacy Meteor bundle), it fails with the same error as Google Maps's JS API

However, if you change the URL of Cordova's inspector to a URL that links directly to your Meteor/node server, it will load Meteor.isModern bundle in the same webview/cordova and it works just fine (no error in the console):

Supplemental information 1-Google Maps JS api must be loaded dynamically (based on Google's terms of service) but in order to test, we did load Google Maps API statically so Babel was able to "compile" it (recommendation from Quave). That worked but it's not a long term solution for a production environnement because Google officially say it should not be done and can stop working at any time.

2-If we override the function Object.prototype.entries function and put a function that works with iterable, it continues executing Google Maps without that error. (but it gives a new error about Object.prototype.keys)

Conclusion: In Meteor's bundle made for Cordova, it's impossible to load ES2020 scripts dynamically and Google Maps is like that. We understand that Meteor's cordova bundle does overrides some built-in objects and functions like Object.prototype.entries/keys and that fails with dynamic loading of.modern scripts

Possible solutions: -Use built-in Object.prototype.entries/keys in Cordova's bundle ? -Build Cordova's Meteor bundle with a modern version? That could lead to incompatibilities with older phones I guess?

Sources from Google: Google will stop offering v3.53 in May:

source: https://developers.google.com/maps/documentation/javascript/versions

Releases notes saying 3.54 is the first version built using ES2020: https://developers.google.com/maps/documentation/javascript/releases#3.54.1

Meteor forums about this: https://forums.meteor.com/t/using-google-maps-js-api-with-cordova/61428/8

[chandibernier]

I forgot to mention, we did test in 2 different apps: -Our app -A blank new app just started for that

The results are exactly the same. It's only the bundle ( web.browser, web.browser.legacy, web.cordova) that makes it work or not work).

[paulincai]

Hi @chandibernier, I don't know what is "Quave" and how it/he/they helped you debug but not fix, but it is clear that you need a custom build tool so you can independently set your bundle as modern regardless what the Meteor bundler is set to do. In the forum there is a hint where you can start with your development. Following the input from your colleagues, I think there should be enough for you and "Quave" to propose a resolution.

[chandibernier]

Hi @paulincai ,

Thanks. We'll look into that and respond here and in Meteor forum.

PS: Quave is the development company where Filipe Nevola (ex CEO of Meteor) now works.