Touch events bleed through divs to the map when they are animated over the map

I’m submitting a … (check one with “x”)

• question
• any problem or bug report
• feature request

If you choose ‘problem or bug report’, please select OS: (check one with “x”)

• Android
• iOS

cordova information: (run $> cordova plugin list)

branch-cordova-sdk 2.6.0 "branch-cordova-sdk"                                                    
com.adjust.sdk 4.12.5 "Adjust"                                                                   
com.googlemaps.ios 2.6.0 "Google Maps SDK for iOS"                                               
com.testfairy.cordova-plugin 2.9.0 "TestFairy Plugin"                                            
cordova-android-play-services-gradle-release 1.2.1 "cordova-android-play-services-gradle-release"
cordova-clipboard 1.1.1 "Clipboard"                                                              
cordova-plugin-actionsheet 2.3.3 "ActionSheet"                                                   
cordova-plugin-advanced-http 1.11.1 "Advanced HTTP plugin"                                       
cordova-plugin-allow-backup 0.0.2 "cordova-plugin-allow-backup"                                  
cordova-plugin-app-version 0.1.9 "AppVersion"                                                    
cordova-plugin-badge 0.8.7 "Badge"                                                               
cordova-plugin-calendar 5.0.0 "Calendar"                                                         
cordova-plugin-camera 3.0.0 "Camera"                                                             
cordova-plugin-datepicker 0.9.3 "DatePicker"                                                     
cordova-plugin-device 1.1.7 "Device"                                                             
cordova-plugin-dialogs 1.3.4 "Notification"                                                      
cordova-plugin-facebook4 1.9.1 "Facebook Connect"                                                
cordova-plugin-file 6.0.1 "File"                                                                 
cordova-plugin-firebase 1.0.0 "Google Firebase Plugin"                                           
cordova-plugin-googlemaps 2.3.0-beta-20180430-1841 "cordova-plugin-googlemaps"                   
cordova-plugin-googleplus 5.3.0 "Google SignIn"                                                  
cordova-plugin-inappbrowser 1.7.2 "InAppBrowser"                                                 
cordova-plugin-ionic-webview 1.2.0 "cordova-plugin-ionic-webview"                                
cordova-plugin-market 1.2.0 "Market"                                                             
cordova-plugin-network-information 2.0.1 "Network Information"                                   
cordova-plugin-screen-orientation 2.0.2 "Screen Orientation"                                     
cordova-plugin-splashscreen 5.0.2 "Splashscreen"                                                 
cordova-plugin-statusbar 2.3.0 "StatusBar"                                                       
cordova-plugin-whitelist 1.3.3 "Whitelist"                                                       
cordova-plugin-x-socialsharing 5.3.2 "SocialSharing"                                             
cordova-sqlite-storage 2.3.0 "Cordova sqlite storage plugin"                                     
es6-promise-plugin 4.1.0 "Promise"                                                               
ionic-plugin-keyboard 2.2.1 "Keyboard"                                                           
uk.co.workingedge.phonegap.plugin.launchnavigator 4.2.0 "Launch Navigator"                       

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

@ionic-native/core: "4.4.0"
@ionic-native/google-maps: "^4.7.0"

Current behavior:

In the page that has the map, I have several buttons that when you tap them they enable (with ngIf) and slide in/fade in various divs (such as calendars or option selectors) over the map (no page changes). Tapping on those buttons again will disable the divs. When I tap inside the overlayed divs, the map behind them receives the touches instead of the divs.

Expected behavior:

The divs should receive the touches, and the map shouldn’t receive them/move etc.

Additional information:

• Any div that exists already in the page over the map (and is not animated in), will correctly receive the touches
• Pushing pages to the stack works perfectly as well.
• This has been a problem again in the past, but at some point it was fixed. The last commit that I have tried where the problem does not exist is https://github.com/mapsplugin/cordova-plugin-googlemaps/commit/5f4a80a295a7a695c8aeef354d7d59cb152c6790 from April 3rd. I couldn’t test which commit exactly introduced the problem as from commit https://github.com/mapsplugin/cordova-plugin-googlemaps/commit/c3574354deaa033adc86ec65c5571b16ba7aa0f1 to commit https://github.com/mapsplugin/cordova-plugin-googlemaps/commit/32a9f3da78613cce5c05290151ca98cc869a89d0 my app would not launch since multiple_maps would cause a javascript error (instance[output.propName].subscribe is not a function)
• I tried to work around this problem by calling setClickable(false) when I animate the div in, and setClickable(true) when I animate the div out. This way the touches go to the divs, but when I call setClickable(true), the map will not receive any touches immediately. I first have to touch any other element outside the map and only then the map will start receiving touches again. I also tried putting setClickable(true) in a timeout so it is called after the divs have transitioned out, but the behavior is the same.

[aMUSiC]

I confirm that the fix works perfectly, both in the sample project and in my production project.

I understand that an actual project is much more helpful both to display the bug and help you fix it. Now that I have one in place, it will be easy for me too to update it to demonstrate any potential bugs I stumble upon in the future.

Thank you for fixing this. Unless you’d like more information from me, you can close this ticket.

[wf9a5m75]

Okay, I fixed the issue. Sharing the project that reproduce an issue is good way to figure out the root of the problem. Just adding some code in somewhere is not enough, because I can not verify the way is good or not.

Reinstall the plugin from the multiple_maps branch, you can touch the overlay without firing the plugin_touch event. Please try it, and let me know the new code works for you.