Using Google maps js api with Cordova

receptim · April 12, 2024, 11:06am

So there is support for this, but for some reason Meteor.isModern is false on localhost. We need to find out how this changes.

burni13 · April 12, 2024, 11:59am

@receptim yes, so far, it’s actually only 1 function that fails in the cordova bundle.

See our last post in this thread here: Client Architecture / clientArch / web.browser.legacy - #8 by burni13

We’re a bit skeptical just forcing the modern package like that will have no side effect (mostly on older phones).

So either we try to override the function that fails (not sure yet between Object.entries() or Map.entries() ).

If there’s no easy or risky way, we’ll just switch to Leaflet.js until Meteor supports Google Maps in Cordova.

Regards,

Burni13

burni13 · April 15, 2024, 6:40pm

Ok we’ve done more testing:

1-We’ve overridden Object.prototype.entries which fixed this specific error message but then it failed on Object.prototype.keys . So far, we’ve stopped working on that.

2-Based on @matheusccastro 's recommendation, we’ve downloaded Maps’s JS API 3.56 as a local npm and made it ‘compile’ by Babel.

This works but it has a serious issue, it could stop working anytime because Google says it’s not supported and they don’t allow caching for more than 30 minutes. So when it stops working, we’ve got to run to build a new version. So it’s probably not ‘stable’ enough to go for prod.

So we’ve ended up opening an issue with Meteor :

github.com/meteor/meteor

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

opened 04:48PM - 15 Apr 24 UTC

chandibernier

Project:Mobile

Google Maps JS API version 3.53 is the last one to be working in cordova and wil…l 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 ![image](https://github.com/meteor/meteor/assets/43210276/0d0c134f-3ff2-4a63-9b5a-411577fd0d19) 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. <img width="838" alt="image" src="https://github.com/meteor/meteor/assets/43210276/0ddc5c25-09d1-4b0f-b13d-f92e3a2b24a7"> 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 ![image](https://github.com/meteor/meteor/assets/43210276/4472f220-9f08-4a48-9270-c3341db8fee7) 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): ![image](https://github.com/meteor/meteor/assets/43210276/8976b3b3-0a2d-4097-a75a-cf81a360613f) **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: <img width="1081" alt="image" src="https://github.com/meteor/meteor/assets/43210276/0217de42-b039-489d-9844-fa739c2918f2"> 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

which seems to be related to another one that was open in January and got no answer at all:

github.com/meteor/meteor

ecmascript Map.keys not iterable on cordova

opened 01:33PM - 09 Mar 22 UTC

benstrum

Project:Mobile Type:Bug

When trying to iterate Map.keys() on cordova browser, an exception is thrown "Ke…ys is not a function or its return value is not iterable". To reproduce the problem, run a meteor cordova app in the debugger using Chrome DevTools. From the js console, you run the following code: ``` t = new Map(); t.set(1, '1'); t.set(2, '2'); for (docid of t.keys()) console.log(docid) ``` **Version Info** Meteor 2.6.1 ecmascript@0.16.1 ecmascript-runtime@0.8.0 ecmascript-runtime-client@0.12.1 ecmascript-runtime-server@0.11.0 **Environment** Host: Mac Mobile Device: Android

so unless Meteor teams “fixes” that bug in Cordova’s bundle, we find another solution, we’ll probably have to switch to Leaflet in prod until Meteor supports Google Maps under Cordova again.

rjdavid · April 16, 2024, 1:02am

Just posting here to confirm that Google Maps is not loading successfully in the legacy bundle of Meteor. Our solution is not to load Google Maps when Meteor.isModern is false and show a message instead. This works for us (on web) as legacy is a small percentage of our users and the use of the maps is not central to the app.

I can see how this is a big issue with cordova given that it loads the legacy bundle. I am not sure if anybody is still around to know why this is the case.

The best route here is to fork Meteor, force modern bundle to cordova and test. That can help give more data for consideration to the Meteor team (who are focused in delivering 3.0)

rjdavid · April 16, 2024, 1:35am

I haven’t develop for cordova for quite a while now but checking the supported android devices, seems like the reason of supporting very old android devices is now moot with the restrictions set for the android api level. I am not sure how it looks like at iOS.

But that might be enough to start supporting the modern bundle for cordova (or at the very least, make it a config).

burni13 · April 16, 2024, 1:09pm

@rjdavid: would you happen to know where we could make the change (in a fork) to force the modern bundle in cordova’s bundle ?

rjdavid · April 16, 2024, 2:07pm

I don’t. The build packages are an excellent place to start

paulishca · April 16, 2024, 3:06pm

github.com

meteor/meteor/blob/5c3b3c51f3d9cd3d79ef4c1104a5bec784300c4a/packages/meteor/cordova_environment.js#L11


      
          /**
           * @summary Boolean variable.  True if running in a Cordova mobile environment.
           * @type {Boolean}
           * @static
           * @locus Anywhere
           */
          Meteor.isCordova = true;
          
          Meteor.isProduction = meteorEnv.NODE_ENV === "production";
          Meteor.isDevelopment = meteorEnv.NODE_ENV !== "production";
          
          // For now, since we can't send different bundles to different Cordova
          // browsers at runtime, all Cordova clients must be regarded as legacy.
          Meteor.isModern = false;

burni13 · April 18, 2024, 6:24pm

hi @paulishca ,

Thanks a lot for your interest and help! We’ve just tested that and what it does is only set the variable Meteor.isModern = true in the client. So it says it’s “modern” but the bundle is still based on legacy.

We’re still searching in the code where the build of the bundle is done.

We’re not sure it’s going to be easy as all packages in /Users/fafafa/.meteor/packages do have different sources for :

web.cordova
web.browser
web.browser-legacy
web.cordova-legacy (yeah, that exists!)

which probably means the required change to build a modern-like bundle for cordova is deeper/wider than just changing one value somewhere.
we’ll get back as soon as we find something useful!

burni13 · May 24, 2024, 11:50pm

So far, we found that errors were because of overrides of Map and Set so we disabled them as described in this thread on github : Google Maps JS API will stop working in Cordova in May for iOS+Android · Issue #13094 · meteor/meteor · GitHub

perumalkuk · June 9, 2024, 8:15am

Confirm the disabling overrides in ecma_runtime_client makes maps work. Thank you @burni13 for sharing it.
I did face some compilation challenge, but eventually got it sorted.

yenph · June 20, 2024, 4:11am

Can you show me the directory containing the data of ecmascript-runtime-client? is it in C:\Users\Admin\AppData\Local\.meteor\packages\ecmascript-runtime-client ?

yenph · June 21, 2024, 4:53am

Can you specify how to fix it?

perumalkuk · June 25, 2024, 1:44pm

yenph · June 27, 2024, 4:10am

Do you fix it anywhere else? it doesn’t work for me

perumalkuk · June 27, 2024, 7:20am

What is the error you are getting …Have you removed the older changes where map version was fixed

yenph · June 27, 2024, 8:58am

did you recompiling package? I run meteor add ecmascript-runtime-client then I just edited like your code

, but it got error like this : > I20180530-22:25:20.691(2)? 05-30 22:25:17.987 21623 21623 I chromium: [INFO:library_loader_hooks.cc(36)] Chromium logging enabled: level = 0, default verbosity = 0

I20180530-22:25:20.692(2)? 05-30 22:25:18.300 21623 21722 E chromium: [ERROR:devtools_http_handler.cc(292)] Cannot start http server for devtools. Stop devtools.
I20180530-22:25:20.692(2)? 05-30 22:25:18.826 21623 21623 I MeteorWebApp: Serving asset bundle with version: 8057c556a035454d9f2c44dd8c43e4b340ec5244
I20180530-22:25:20.692(2)? 05-30 22:25:19.477 21623 21732 E chromium: [ERROR:BudgetService.cpp(160)] Unable to connect to the Mojo BudgetService.
I20180530-22:25:20.693(2)? 05-30 22:25:20.369 21623 21623 I chromium: [INFO:CONSOLE(652)] “Uncaught Error: Cannot find module ‘core-js/modules/es7.array.flatten’”, source: http://localhost:12720/__cordova/packages/modules-runtime.js?hash=59942621baf2d3ff23916a0f601008fd2e310b63 (652)
I20180530-22:25:20.693(2)? 05-30 22:25:20.370 21623 21623 I chromium: [INFO:CONSOLE(20)] “Uncaught TypeError: Cannot read property ‘Symbol’ of undefined”, source: http://localhost:12720/__cordova/packages/base64.js?hash=70034bf297d812d5eea319d7eab8841e8009be3d (20)
I20180530-22:25:20.693(2)? 05-30 22:25:20.384 21623 21623 I chromium: [INFO:CONSOLE(17)] “Uncaught TypeError: Cannot read property ‘Base64’ of undefined”, source: http://localhost:12720/__cordova/packages/ejson.js?hash=7587586380ce943e916a569cb87a4487a2c97889 (17)
I20180530-22:25:20.694(2)? 05-30 22:25:20.384 21623 21623 I chromium: [INFO:CONSOLE(17)] “Uncaught TypeError: Cannot read property ‘EJSON’ of undefined”, source: http://localhost:12720/__cordova/packages/diff-sequence.js?hash=9744098811e6a7f11abf1872a0689a21e3766407 (17)
I20180530-22:25:20.694(2)? 05-30 22:25:20.385 21623 21623 I chromium: [INFO:CONSOLE(17)] “Uncaught TypeError: Cannot read property ‘EJSON’ of undefined”, source: http://localhost:12720/__cordova/packages/id-map.js?hash=73c7b30c5c3b42f275ffa8e279c9ab7d526e38da (17)
I20180530-22:25:20.694(2)? 05-30 22:25:20.401 21623 21623 I chromium: [INFO:CONSOLE(20)] “Uncaught TypeError: Cannot read property ‘Symbol’ of undefined”, source: http://localhost:12720/__cordova/packages/random.js?hash=3a0a1fb2f692cc600789180c65e0614eb4d1945a (20)
I20180530-22:25:20.695(2)? 05-30 22:25:20.402 21623 21623 I chromium: [INFO:CONSOLE(17)] “Uncaught TypeError: Cannot read property ‘EJSON’ of undefined”, source: http://localhost:12720/__cordova/packages/mongo-id.js?hash=2f2a83467fca25b9f42f5bfaef5abe29526393e5 (17)
I20180530-22:25:20.695(2)? 05-30 22:25:20.403 21623 21623 I chromium: [INFO:CONSOLE(20)] “Uncaught TypeError: Cannot read property ‘Symbol’ of undefined”, source: http://localhost:12720/__cordova/packages/ordered-dict.js?hash=6effe900e78276f8fb4fcdfcd45c649cb21fe50e (20)
I20180530-22:25:20.695(2)? 05-30 22:25:20.403 21623 21623 I chromium: [INFO:CONSOLE(20)] “Uncaught TypeError: Cannot read property ‘Symbol’ of undefined”, source: http://localhost:12720/__cordova/packages/tracker.js?hash=a0da2f3e7fbf7ea80d18148cb18ef900ea50c95d (20)
I20180530-22:25:20.695(2)? 05-30 22:25:20.434 21623 21623 I chromium: [INFO:CONSOLE(17)] “Uncaught TypeError: Cannot read property ‘DiffSequence’ of undefined”, source: http://localhost:12720/__cordova/packages/minimongo.js?hash=18352629137a3b94ee43f8994aec3f9d4fd225d7 (17)
I20180530-22:25:20.695(2)? 05-30 22:25:20.435 21623 21623 I chromium: [INFO:CONSOLE(17)] “Uncaught TypeError: Cannot read property ‘EJSON’ of undefined”, source: http://localhost:12720/__cordova/packages/check.js?hash=7d8a6e550ea7ab9936e21a2d9bb76f12882fb043 (17)
I20180530-22:25:20.696(2)? 05-30 22:25:20.435 21623 21623 I chromium: [INFO:CONSOLE(17)] “Uncaught TypeError: Cannot read property ‘Random’ of undefined”, source: http://localhost:12720/__cordova/packages/retry.js?hash=b7e99dfd5eebf2adeecff68d150fc22e0d86f855 (17)
I20180530-22:25:20.696(2)? 05-30 22:25:20.436 21623 21623 I chromium: [INFO:CONSOLE(20)] “Uncaught TypeError: Cannot read property ‘Symbol’ of undefined”, source: http://localhost:12720/__cordova/packages/callback-hook.js?hash=8bdf3b5506fd2197bffa0db605fa422b9022fd10 (20)
I20180530-22:25:20.696(2)? 05-30 22:25:20.436 21623 21623 I chromium: [INFO:CONSOLE(17)] “Uncaught TypeError: Cannot read property ‘check’ of undefined”, source: http://localhost:12720/__cordova/packages/ddp-common.js?hash=eba4c7e6cb7e9e642d2a8baafe6a87a01d8ed9f0 (17)
I20180530-22:25:20.696(2)? 05-30 22:25:20.450 21623 21623 I chromium: [INFO:CONSOLE(20)] “Uncaught TypeError: Cannot read property ‘Symbol’ of undefined”, source: http://localhost:12720/__cordova/packages/reload.js?hash=96a42973e40fe6ee6372056266fe93b211f8b4f9 (20)
I20180530-22:25:20.697(2)? 05-30 22:25:20.450 21623 21623 I chromium: [INFO:CONSOLE(17)] “Uncaught TypeError: Cannot read property ‘Retry’ of undefined”, source: http://localhost:12720/__cordova/packages/socket-stream-client.js?hash=5fe8c9352e76d5fe8e23319f5cafb419d460514f (17)
I20180530-22:25:20.697(2)? 05-30 22:25:20.467 21623 21623 I chromium: [INFO:CONSOLE(17)] “Uncaught TypeError: Cannot read property ‘check’ of undefined”, source: http://localhost:12720/__cordova/packages/ddp-client.js?hash=b5ccd2feefdc799477ec5f00c3c12d8a7f51fa50 (17)
I20180530-22:25:20.697(2)? 05-30 22:25:20.468 21623 21623 I chromium: [INFO:CONSOLE(14)] “Uncaught TypeError: Cannot read property ‘DDP’ of undefined”, source: http://localhost:12720/__cordova/packages/ddp.js?hash=dae39f35e2956c6df4d8b9963eea38371d546176 (14)
I20180530-22:25:20.697(2)? 05-30 22:25:20.468 21623 21623 I chromium: [INFO:CONSOLE(17)] “Uncaught TypeError: Cannot read property ‘LocalCollection’ of undefined”, source: http://localhost:12720/__cordova/packages/allow-deny.js?hash=17efd8167bebe1f2018f9c642d8000a549d1fe26 (17)
I20180530-22:25:20.698(2)? 05-30 22:25:20.484 21623 21623 I chromium: [INFO:CONSOLE(17)] “Uncaught TypeError: Cannot read property ‘AllowDeny’ of undefined”, source: http://localhost:12720/__cordova/packages/mongo.js?hash=7dae0d2bbf4992c92bbb005435b6ee27a23d13b2 (17)
I20180530-22:25:20.698(2)? 05-30 22:25:20.485 21623 21623 I chromium: [INFO:CONSOLE(17)] “Uncaught TypeError: Cannot read property ‘Tracker’ of undefined”, source: http://localhost:12720/__cordova/packages/reactive-var.js?hash=9f198731db45dae3de53bd7103e01e9421173e40 (17)
I20180530-22:25:20.698(2)? 05-30 22:25:20.501 21623 21623 I chromium: [INFO:CONSOLE(17)] “Uncaught TypeError: Cannot read property ‘EJSON’ of undefined”, source: http://localhost:12720/__cordova/packages/logging.js?hash=8c7fdcb63407aa4a3c7a70ff9ae4c6a66f15163f (17)
I20180530-22:25:20.698(2)? 05-30 22:25:20.517 21623 21623 I chromium: [INFO:CONSOLE(18)] “Uncaught TypeError: Cannot read property ‘Tracker’ of undefined”, source: http://localhost:12720/__cordova/packages/reactive-dict.js?hash=e1f032cd2a48186f99b331b4f3017f1c1dbea988 (18)
I20180530-22:25:20.698(2)? 05-30 22:25:20.519 21623 21623 I chromium: [INFO:CONSOLE(18)] “Uncaught TypeError: Cannot read property ‘ReactiveDict’ of undefined”, source: http://localhost:12720/__cordova/packages/session.js?hash=0924da7b9d82f6c95b0c4eb141db786031915834 (18)

I use Meteor 2.8.2, cordova@10

yenph · June 27, 2024, 10:03am

what is Meteor Version you use?

perumalkuk · June 27, 2024, 10:18am

Do the code change exactly as mentioned in
https://github.com/meteor/meteor/issues/13094#issuecomment-2130517278

including the console statement. I too tried to remove but it was failing compilation.

yenph · June 27, 2024, 10:25am

yes, i do, but nothing change, i use ArcGIs API Javascript , here is error log : "Uncaught TypeError: r.keys is not a function or its return value is not iterable", source: https://js.arcgis.com/4.22/init.js (20)