Cordova-plugin-googlemaps: Ionic: map disappearing and/or unexpected animation on tab switching

Created on 21 Mar 2018 · 18Comments · Source: mapsplugin/cordova-plugin-googlemaps

I'm submitting a ...

[ ] question
[x] any problem or bug report
[ ] feature request

If you choose 'problem or bug report', please select OS:

[x] Android
[x] iOS

cordova information:

com.googlemaps.ios 2.6.0 "Google Maps SDK for iOS"
cordova-plugin-device 2.0.1 "Device"
cordova-plugin-googlemaps 2.2.8 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.0.5 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-whitelist 1.3.3 "Whitelist"

"@ionic-native/core": "4.5.3", "@ionic-native/google-maps": "^4.6.0",
Current behavior:
When switching the tab in an Ionic app and then switching back to the tab with the map, the map sometimes disappears or does an unexpected animation from top left to bottom right. If you scroll in the other tab the map always disappears. After switching tabs a couple of times the map re-appears with the unexpected animation. See the following screen capture and demo code.

Expected behavior:
The map not disappearing at least, best case no animation.

Screen capture or video record:
http://sharedby.manuel-heidrich.com/qgdiFE/dP4alTDAOU

Related code, data or error log (please format your code or data):
https://github.com/mahnuh/cordova-google-maps-issue-demo

bug fixed

Source

mahnuh

👍3

All 18 comments

Sorry, the support for ionic-native/google-maps is suspended currently.
https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/2162

wf9a5m75 on 21 Mar 2018

😕1

@wf9a5m75 Any idea if you will be able to smooth things out with the ionic team shortly? We have a couple of apps depending on your plugin and at the moment they all are kind of broken because of this issue.

Some additional insights:

We were able to reproduce the same issue on Android as well.
Inspecting the view ui hierarchy in xcode shows that the GoogleMapsViewController disappears entirely, see the following screenshots.

http://sharedby.manuel-heidrich.com/rGW7Eq/gwmIPx7dtw
http://sharedby.manuel-heidrich.com/fSUeuX/w4tF1ymXQt

mahnuh on 24 Mar 2018

Could you make an apk tentatively?

wf9a5m75 on 24 Mar 2018

@wf9a5m75 I checked for the map div now, but it stays in place: http://sharedby.manuel-heidrich.com/QQSYBv/PoVAgm3Py1

Give me a second, I will add Android an build an apk.

mahnuh on 24 Mar 2018

@wf9a5m75 another funny thing, when changing the css of the map div the map re-appears: http://sharedby.manuel-heidrich.com/tGKpaZ/ZljLuUij16

mahnuh on 24 Mar 2018

@wf9a5m75 here is the apk, but I was not able to test it as I do not have an Android device at home: http://sharedby.manuel-heidrich.com/J32O2b/CANsCwvmPm

mahnuh on 24 Mar 2018

The issue didn't occur on my phone at all.

wf9a5m75 on 24 Mar 2018

It's midnight in the U.S. anyway, I will see the code tomorrow.

wf9a5m75 on 24 Mar 2018

@wf9a5m75 Thanks for your help so far and have a good night! ;-)

mahnuh on 24 Mar 2018

Please reinstall the plugin from the multiple_maps branch.

The map is disappeared problem should be gone.
2166

wf9a5m75 on 25 Mar 2018

🎉1

Yes, the map won't disappear anymore! Just the funny animation remains.
But at least my apps are not broken anymore, thank you so much for the fast fix and your awesome plugin @wf9a5m75 !

mahnuh on 25 Mar 2018

Regarding of the unexpected animation, this occurs because the about page tab is display: none.
In this case, the map div is {left: 0, top: 0, width:0, height: 0}.
The plugin moves the map view at the position and the size.
After that, when you show the about page, the map view moves to the same position and size with the map div. Thus, unexpected animation.

I updated the plugin code to handle this case more better.
When the plugin detects the map div is display: none, the plugin detaches the map view automatically.

2166

wf9a5m75 on 26 Mar 2018

Okay, the unexpected animation is fixed.
2166

wf9a5m75 on 28 Mar 2018

I know this ticket is closed but I'd like to mention that this will still happen in 2.2.9 (even more prominently) if you change the clickable state of the map (with map.setClickable(true/false)) , push another page into the stack an then go back to the page with the map.

I used to have setClickable(false) onPageLeave and setClickable(true) onPageEnter when I was using an older version of multiple_maps, as it ensured that the map wouldn't highjack the touches on other pages, but now that the plugin has better detection, removing the setClickable() calls gets rid of the unwanted map animation. Still worth mentioning though.

Another strange behavior was in 2.2.8, with this unwanted animation thing happening only on iOS (android worked perfectly), but if I attached safari's debugger on my app running in iOS, the unwanted animation wouldn't happen!!