Cordova-plugin-googlemaps: Cannot interact with the map on Android (v2.2.9 - ionicv1)

[eleva-dev]

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")

• [ X] Android
• [ ] iOS

cordova information: (run $> cordova plugin list)
com.googlemaps.ios 2.6.0 "Google Maps SDK for iOS"
com.telerik.plugins.nativepagetransitions 0.6.5 "Native Page Transitions"
cordova-plugin-camera 2.2.0 "Camera"
cordova-plugin-crosswalk-webview 1.7.2 "Crosswalk WebView Engine"
cordova-plugin-device 1.1.2 "Device"
cordova-plugin-googlemaps 2.2.9 "cordova-plugin-googlemaps"
cordova-plugin-inappbrowser 1.6.1 "InAppBrowser"
cordova-plugin-statusbar 2.4.1 "StatusBar"
ionic-plugin-keyboard 2.2.0 "Keyboard"

Current behavior:
I'm using ionic v1.
After "plugin.google.maps.Map.getMap(div)" call, map is frozen (i cannot touch neither interact with it). It happens only on android. Map div has a data-tap-disabled="true" attribute (even I've not set it).
If I try to call map.setClickable(true) or any other method on plugin, i got the error log below (see attached screenshot)

Expected behavior:
On IOS everything is fine, I can interact with the map normally. It should be ok even in Android (it was before last update from previous version)

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

[wf9a5m75]

Please share your project files on github.

[eleva-dev]

Hi, unfortunately I cannot share the project (as it is not open source).
It's a very big project so I don't know if I can arrange a demo.
I'll do the best as I can.

Will be a video ok? Or you need the code?

[wf9a5m75]

Will you see a video to a doctor when you have a health problem?

[eleva-dev]

Hi,
I see your point, it tooks me a while to arrange a demo ( i should remove a lot of code, and unuseful things). I've invited you to the demo project (it comes with everything in it, modules, plugings etc..)

Just run "ionic run android" to see it on your device/emulator.
Thank you for your support.

[wf9a5m75]

Sorry for late response, and thank you for sharing your project.

I have tried to build your project, but your project requires kind of old environment, such as Gradle 2.2

For the reason, I couldn't build your project.

I will try this tomorrow again, but I appreciate if you update the environment.

[eleva-dev]

Hi unfortunately I cannot update right now gradle.
I think this is due to old version of Ionic CLI (1.7.16) and cordova-android 5.1.1.
I know this is a old environment, but I cannot update it so simply.
I should find a way to update them without loosing any functionality as this is a two-years old project based on a lot of other plugins and features which needs this environment.

I'll do my best to update everything and give you the update.
In the meanwhile if you can try this again anyway, I'll appreciate it.

[eleva-dev]

Hi,
any news? Did you finally find out a way to build the project?

I've tried to update gradle, but it breaks my build.

[wf9a5m75]

No luck so far. I can't build your project.

[eleva-dev]

I've just made a commit with a gradle extra which should give you compatibility with old plugin. Please try again to make the build and let me know if this solve your issue.

[eleva-dev]

Sorry to bother you, still facing same issue... have you been able to build the project with the last commit?

[wf9a5m75]

No, it is too much old. I can't build your app.

---

Regarding of the error message, it means you tried to something before the map is ready.

For example, all methods of dynamic class (except Map.getMap() method) have to run after the MAP_READY event.

In your code, you write like this:

map = plugin.google.maps.Map.getMap(div,{ ... });
map.setVisible(true);
map.setMyLocationEnabled(false);
map.setMapTypeId(plugin.google.maps.MapTypeId.ROADMAP);

map.addEventListener(plugin.google.maps.event.MAP_READY, onMapReady);

Well, this is bad code syntax (at this time).

---

You have to write like this:

map = plugin.google.maps.Map.getMap(div,{ ... });
map.addEventListener(plugin.google.maps.event.MAP_READY, onMapReady);

function onMapReady() {
  map.setVisible(true);
  map.setMyLocationEnabled(false);
  map.setMapTypeId(plugin.google.maps.MapTypeId.ROADMAP);
}

[wf9a5m75]

The plugin v2.0 to v2.1.x executes all methods when you write the code exactly.

However, from the plugin v2.2.0, this maps plugin contains internal command queue, and execute the methods one by one.
This prevents unexpected errors from app developers.

That's why you can't run the same code with the latest version.

[wf9a5m75]

Well, there is one more information.

I wrote Well, this is bad code syntax (at this time). in the above comment.

The meaning of (at this time) indicates the code syntax would be changed in the next version.
Since this plugin takes callback as the second argument (like map.addMarker({...}, callback), the application code would become kind of messy.

In the next version, the maps plugin allows without the callback (like var marker = map.addMarker({...})), even without MAP_READY.

---

So the conclusion is, with the v2.2.9, your code is wrong, but your code is correct with the next version.

[eleva-dev]

Hi, I've moved that lines inside the event, the error has gone away (no problem on refactoring the code until the new version).

Unfortunately, the map still remains unresponsive to touch events.
Probably this is due to anything else, could it be crosswalk with those lines in config.xml?

<preference name="xwalkVersion" value="22+"/>
<preference name="xwalkCommandLine" value="--disable-pull-to-refresh-effect"/>
<preference name="xwalkMode" value="embedded"/>
<preference name="xwalkMultipleApk" value="true"/>
<preference name="xwalkZOrderOnTop" value="true"/>

[wf9a5m75]

Try to remove this line <preference name="xwalkZOrderOnTop" value="true"/>

[eleva-dev]

Unfortunately removing this line has no effect.

[wf9a5m75]

Um, unfortunately, I have no idea, because I can't build your project.
I strongly recommend you to start creating new project.

[eleva-dev]

It's crosswalk.
I've removed all code, leaving only the getMap.
I've removed also other plugins (leaving only crosswalk and mapsplugin).

Removing also crosswalk, the map becomes responsive to touch events.
I think it is related in some way to "xwalkZOrderOnTop" preference.
It should be "true" in previous version of this plugin to make the map clickable as said

1. https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.0.0/Installation/crosswalk/README.md
2. https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview/pull/65

Maps plugin seems to ignore it. Is it possible or am I wrong?

Thank you.

[wf9a5m75]

Crosswalk is already deprecated, and recent devives have enough power without Crosswalk.

[wf9a5m75]

ping

[eleva-dev]

As I said, is Crosswalk.
I understand you do not support compatibility for Crosswalk, so I'm planning to remove it and see what happens, as I'm not able to solve this problem by myself. My concern is that I'll miss some functionality on old devices, which, unfortunately are still on the market and use old webviews.

If you could give me an hint on what to try to solve this issue, it would be appreciated.
If not, I can understand and I'll figure it out my best options.

[wf9a5m75]

Well, even if you still want to support older devices, the maps plugin does not support older version less than Android 4.4.

[eleva-dev]

That's true.
Thank you for your time, I'll probably go removing crosswalk and going up to 4.4 version as minimum supported.
Have a nice day.

[wf9a5m75]

I close this thread at once. If you have another troubles with higher version than 4.4 (including 4.4 - kitkat), please make another issue.

[sabanad]

@wf9a5m75 @eleva I have the same issue and there is no crosswalk in my app. However the maps becomes unresponsive in android version 7.0, maps version 2.2.9 and 2.3.6. It works fine on all other devices. Please help