Cordova-plugin-googlemaps: ignore touch events when div is over map canvas

[pke]

I have a scrollable div on top of the map. It starts at the bottom and can be dragged by the user all the way to the top. When the div overlays the map element though all the touch events are first grabbed by the map. Is there a way to stop that?
I think that has to do with how the map is integrated in the DOM or rather underneath it.
Any suggestions?

[wf9a5m75]

The v1 watches only under the map div.
So your case does not work.

The v2 watches all html elements, so your case should work (but I haven't tested the case yet)

[pke]

Thanks, I'll try v2 then and report back here.

[pke]

@wf9a5m75 Ok, #multiple_maps branch (that is the supposed v2?) lets me scroll the list but there is no map visible anymore. I just replaced the plugin and did not touch the rest of the code. It does seem the plugin is making some things in the app transparent though. I can see the webviews background color (set in config.xml). I am using the newest crosswalk 21.

[wf9a5m75]

The v2 does not work with crosswalk currently.

[pke]

aha. Whats the problem with it?

[wf9a5m75]

I haven't figured out yet.
But the crosswalk blocks the v2 plugin for some reason.

[pke]

@wf9a5m75 I have tried v2 now without crosswalk and the list can be scrolled now over the map but that is only possible cause the map itself can no longer be scrolled. Same setup works for v1.

[wf9a5m75]

Please report with any example always.

[pke]

Difficult to extract from the app code. I'll try to setup a sample.
Any known issues with z-index?

[phonenatural]

hello, i have the same problem, but I do not know how it works.

You could help me.

I use Framework7 for my apps,
example:
when i am showing an alert (of framework7: myApp.alert('message','title'); ), is it have shadow and div.

when I'm clicked alert, nothing happens and with double-click It is evident that the event is captured by the map

pd: I do not write english, sorry.

[wf9a5m75]

https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/1215#issuecomment-265535049

[jstoup111]

I'm having an issue with V2 that is similar.

None of the touch/click events are working on the app. I've tried map.setClickable(true) and nothing happens. I've had weird instances when navigating to another page and back again that the map starts to respond to touch events.

[jose-cabrera]

I have the same issue,
Got the map working on ionic v2, with the native plugin, everything ok.
I want it to have a FAB so you can change stuff on the map. It doesn't work, the fab dost respond.
Try using a ion-select and the popup appears, but it doesn't respond to touches.

<ion-content> <div id="map" style="height: 100%; width: 100%"></div> <ion-list> <ion-item> <ion-label>Distancia</ion-label> <ion-select [(ngModel)]="distancia"> <ion-option value="1" selected="true">1 KM</ion-option> <ion-option value="2">2 KM</ion-option> </ion-select> </ion-item> </ion-list> </ion-content>

[thyde1]

I am having the same issue as @jstoup111 where on some occasions, maps with no visible DOM elements overlayed on them will not respond to any touch events. This happens intermittently. On some maps in our app, it occurs, but then on other occasions does not on the same map under the same circumstances.

[jstoup111]

@thyde1 Are you using v1 or v2? I'm still running into issues so any help would be appreciated. Since the map doesn't register any touch events (I have a scroll div on top).

Any chance you could share some code snippets of HTML and javascript of what you're doing? I'd really like to use the plugin, but if I can't get basic things working like touch events on the map, I have to use the javascript library instead (which I'd like not to do for performance reasons.)

[thyde1]

@jstoup111 I'm using v2. I since found that the problem is associated with how the plugin determines the stacking order of DOM elements. In particular the _getDomDepth_ function in _Common.js_, which assigns a number to each DOM element to determine the order in which they stack. You can look at the _result attributes that have been applied to your DOM elements, the higher this value, the plugin will treat them as being further forward.

Here, I changed line 297 from var result = idx * 1000 + parseInt(zIndex, 10) + depth; to var result = depth * 100000 + parseInt(zIndex, 10) * 1000 + idx;, which still does not represent how a browser determines the stacking order, but it works in my application.

If I have the time, I may try and make this work in general and submit a PR, but the way a browser determines stacking order is actually quite complex.

[thyde1]

Also, I am using Ionic, which dynamically updates the z-index of DOM elements when transitioning between states. It appears that the plugin caches the 'depth' of DOM elements, and so when their z-indexes are updated, the plugin does not take this into account,

[jstoup111]

@thyde1 Thanks for the super thorough response. I'm also using Ionic (v2) so the cached z-index explains why it wasn't working on previous loads. Still doesn't really explain why it wasn't working on first initial load unless getDomDepth was calculating incorrectly.

I'm going to use the js version until this is fixed, but I'm really looking forward to using it once the plugin is released!

[pke]

Why was this closed?

[wf9a5m75]

Noboday talked for a whIle.

[pke]

Really? You cannot give any insights into this weird behaviour at all? Re-orderings seems to be really a problem. I'd like to understand why all this fiddling with z-index is even needed. Is it because of the way the plugin injects the map into a div (behind the webview)?

[thyde1]

Issues where the map does not respond to touch (on iOS) can also be caused when maps are displayed where maps which have since been removed were. I have a fix for this in #1269

[wf9a5m75]

@pke
I said please provide any example. No one provide the example. How can I help you?
If you provide any example that reproduce the issue, I reopen the this issue here.

By the way, you don't need to use the plugin mandatory if you think this plugin is buggy.

[TadijaB]

Here is a workaround that makes the map not clickable while an alert is open using this.map.setClickable(false);

https://stackoverflow.com/questions/45500031/ionic-3-unable-to-click-on-alert-dialog-shown-above-google-maps

[amirul1000]

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/tree/master/v2.0.0/class/Map/setClickable