Meteor Android App - Google Map

Hi All,

Need some pointers to debug. I have an Android Meteor App and it uses Google Maps to show location. It has been happily working for last couple of years, but suddenly it stopped working from yesterday, however the same app opened on browser loads Google Maps. Any hints to solve this…Thanks

Google Maps is really a large bunch of products. I take it Android Meteor App = Cordova in which case you would normally use an API (Maps Javascript API). This is a paid service with a limited free bundle.
It may stop working when a cost is registered but there is a cap, when an API key was generated before a credit card was mandatory to register, sometimes keys just stop working and a new key needs to be generated (this is why it is better to provide this key to the user in a dynamic way which allows a change without even HCP.

I think you could also use an Map Embed API which still requires a key but it is a free service. In this case … maybe something wrong with the key.

It is common that people who write here give very very very little information and leave it to the imagination of others to come with interesting stories that might help.

You might be using a Goole Maps API key which has been generated in Google Cloud Console (https://console.cloud.google.com/). In the console you may find errors and understand where they come from and why.

Thanks @paulishca

Actually found the error after some debugging. I use dburles:google-maps. It is hardcoded to use api version 3.x but it looks like if google does not find matching version number, it defaults to the latest.

There are some breaking changes in the latest api 3.54 and 3.53, that break the webview used within the android app. Changing it to 3.52 solved it. But it is going to go end of life soon(another couple of months), hopefully updated webview or google api will fix the problem.

We’ve had the same problem with google-map-react and we just added a props to specify the version v: “3.52” . Please note it only worked with an older version of this npm.

Thanks a lot @perumalkuk for giving your solution!

How did you find that the version was the problem ? We have not seen anything in the logs.

Regards,

Burni

I will admit it was not easy. It was more of doing elimination.

First new debugging Cordova app has become tougher, the Chrome Inspect developer options no longer worker as it used to be.

And to make ‘meteor run android’ or ‘meteor run android-device’ is not easy as it seems the cmdline tools (new) may get installed in different folder than usual and one has to specifically set the path to point to the bin folder for the avd manager to work, along with this the gradle, kotlin and java version need to be correct. (I understand with 34 we need to bump gradle and Java…not sure how things will be)

Coming back to debugging, once I was able to make ‘meteor run android-device’ work. The output cleared showed the issue was the initialise phase Google Maps API (as I said I use dburles:Google-map package) . It was returning 2 types of errors depending on parameters passed ‘jv.entries not iterable’ or ‘cfa.entries not iterable’ but the difficult thing was it was working on normal web browser.

On looking at the output of API init, the functions for looping on jv and cfa were indeed defined. So my first thought was I was not passing something valid to the init call for Google maps. The three things it was using was – key, version and libraries . Key was ruled out as it was working on browser, removing libraries did not have much impact --so it was something to do with version.
And ‘3.x’ was being passed to the version - even tough it looked odd, it used to work and it was working with browser.
After lot of googling I noticed the google fine print …from google

Release channels and version numbers

In your application you can specify release channels or version numbers:

  • The weekly channel is specified with v=weekly.
    This channel is updated once per week, and is the most current.
  • The quarterly channel is specified with v=quarterly.
    This channel is updated once per quarter, and is the most predictable.
  • The beta channel is specified with v=beta.
    This channel is based on the weekly channel, and is updated once per week. It includes additional changes for early testing and feedback.
  • The alpha channel is specified with v=alpha.
    This channel is based on the beta channel, and is updated once per week. It includes experiments for customer feedback on prototypes. It is for development purposes only and should not be used in production.
  • The version number is specified with v=n.nn.
    You can choose v=3.54, v=3.53, v=3.52 or v=3.51.
    Version numbers are updated once per quarter (see Quarterly updates)

If you do not explicitly specify a channel or version, you will receive the weekly channel by default…

The details is in the fine print. It seemed that I was getting the latest version API version by default. With this information I started iterating with each version …and found 3.52 worked…

Sorry about the long post

Hi @perumalkuk,

Thanks a LOT for the detailed answer. We did not manage to find any error message anywhere. We’ve tried with adb logcat without seeing anything helpful.

Your post here yesterday really allowed us to fix it as well.

Thank you so much!

Regards,
Burni

Glad to be of help.

Have you noticed that adb is now not showing console messages. Looks like the production build suppresses the console output. This is why it took some time to find the actual error.

So, it looks like any version of the Google Maps javascript library after 3.53 will cause the maps not to load. Version 3.53 will be sunsetted in May 2024 and will not be available. Is there a way to make meteor compatible with later versions of the maps library (or, in other words support ecmascript 2020)?

I’m currently working on that, will report back

1 Like

Great! Anything I can do to help? I tried updating to Meteor 2.14 and just used a meteor minimal app and, if the code is transpiled by meteor, code like this works:

$ca = new Map([[1, ["msie"]], [2, ["edge"]], [3, ["chrome", "crios"]], [5, ["firefox", "fxios"]], [4, ["applewebkit"]], [6, ["trident"]], [7, ["mozilla"]]]);
for (const [d,e] of $ca.entries()) { console.log(d + "=" +  e); }

But if I run the minimal app in an android studio virtual device, connect via chrome dev tools and type the same code in to the console, I get:

VM58:2 Uncaught TypeError: $ca.entries is not a function or its return value is not iterable
    at <anonymous>:2:25

I’m not sure why the Android Webview is not supporting ES2020. Maybe Meteor 3.0? I also thought maybe I could use babel-standalone and process the google maps js on the client, but had no success with that and that seems reather clunky. Is some meteor package overriding the native functionality of Map?

I think there is much inconsistency within the Cordova inner browser (webview) world.
I don’t know if Cordova build respects the settings of modern browser package (‘meteor/modern-browsers’). On the device you test you may try to identify the version of your inner browser and make sure your Maps are supported by that version. You can set that version outside the modern browser range and hope to have it compiled to ES5.

As I understand, even if it works on one Android phone … it might not work on another due to the use of different versions and different vendors even by different mobile phones.
I think in Cordova, since you pack the app for an upfront download it is good to compile everything for ES5.

The problem with google maps is that it is loaded at runtime via script tag injection. I’ve tried to use Babel at runtime to convert the dynamically loaded google maps js, but get the following error.

TypeError: Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
    at _nonIterableSpread (babel.js:604:11)
    at _toConsumableArray (babel.js:579:100)
    at _callee2$ (config-chain.ts:724:43)
    at tryCatch (babel.js:127:18)
    at Generator.<anonymous> (babel.js:215:19)
    at Generator.next (babel.js:156:23)
    at tryCatch (babel.js:127:18)

I’ve tried loading different plugins into Babel at runtime and I always get the same error above. The babel used at compile time when building my app correctly transpiles the code, but not at runtime. I feel like some package within Meteor or a third party package is overriding some expected implemetation required by Babel.

I guess you can just build your own package with a working compiled version of Google Maps.