Explicitly delegate touch events to @capacitor/google-maps layer?

[frederikheld]

Hey everyone!

I'm using @capacitor/google-maps and I am having issues with touch interaction. So far I've only tested it on Android and I know that on Android the map is a separate layer below the WebView, so this might be an Android specific issue. Nevertheless I need to get it working.

This is my layout:

The red area is fairly simple because it has no overlaying components in the WebView. The area with the pink border is a container that sets the layout for the buttons left and right. The area in between (green) and around (blue) the buttons is transparent, but the invisible container is there.

I feel that there is some magic going on that tries to decide if the touch should go to the WebView or the map. This magic allows me to click markers even if they are in the blue or green area. But this magic is causing huge performance issues.

If I tap a marker, the map should be centered to that marker and the info window should pop up quickly. This usually works fine. But if I tap the info window (which should navigate the user to a different view), nothing happens. Sometimes the action happens very delayed (I'm talkin 10+ seconds), sometimes nothing happens at all. Sometimes it feels like touch events are being stacked in the event loop. If this happens, touching the marker will result in a delayed reaction as well, sometime all events are being released in quick order which causes the map to move around quickly. Bottom line: the UX is very bad. It doesn't matter if the markers are clicked in the red, green or blue area, the same happens for all.

UNLESS: at some point it felt like the whole magic just crashed and the touch experience became very different. At that point, I was only able to interact with the map in the red area. Taps in the blue or green area did not go to the map. But all taps that went to the map were executed immediately resulting in the very smooth experience I would expect.

So my question: is it possible to just turn off that magic? It would be no issue to change the button layout (e.g. putting all buttons in a horizontal line) so that there's only a red area where to user can interact with the app. I could not find anything about that in the docs.

Another thought I had: is it possible to define areas that will delegate all touches to the map? Then I could add the respective listeners and functions to the red, green and blue area and avoid the magic that way.

Can anyone please help me to fix this mess?

Thanks in advance!

[frederikheld]

Addendum: I just realized that when the map works as expected, no touch to the overlaying WebView components is registered. It feels like whenever I restart the app, the maps plugin randomly decides which touch layer has priority and then sticks with it.