Touch events for elements position:fixed on top of the map are not fired after scroll

[bogdanripa]

I have a map in a scrollable area, with an element position:fixed above the map.

As I scroll down, the element overlaps the map (as it should). But tapping on it does not fire the touch events. Double-tapping on it will make the map zoom in, which to me means that the touch events are captured by the map itself (even if it's in the background) instead of the HTML element that sits on top.

Note: This does not duplicate if the element is positioned absolute on top of the map.

[wf9a5m75]

I don't recommend to use the map in a scrollable area. Because the map position calculates based on the page scroll position, not the scrollable area.

[Moulde]

I have almost the same issue. I have a div with is positioned on top of the div with the map, but touchstart and click events does not fire on the element, the map will capture the events instead, even though it is below the element. My element is positioned absolute.

[bogdanripa]

Resizing the map on scroll events so that it does not overlap with the elements that I need to be click-able worked fine for me.

Here is a code snippet:

...
initialize: function() {
  _.bindAll(this, "detectScroll");
  $("#wrapper").scroll(this.detectScroll);
},

detectScroll: function() {
  if (this.map) {
    var scrollTop = $('#wrapper').scrollTop();
    var newHeight = this.mapHeight-scrollTop;
    if (newHeight > 0) {
      mapObj = $('.google-map');
      mapObj.css("margin-top", this.mapTop + scrollTop);
      mapObj.css("height", this.mapHeight-scrollTop);
    }
  }
},
...

[wf9a5m75]

@Moulde Please show me your HTML and css.

[wf9a5m75]

When you update the position or the size of the map div programmatically, you need to call map.refreshLayout() https://github.com/wf9a5m75/phonegap-googlemaps-plugin/wiki/Map.refreshLayout()

[Moulde]

@wf9a5m75 I cannot post any code sorry, as it is a work project. I solved it another way. I needed to be able to swipe in a sidemenu, and the element that should catch the touchstart event in the left of the screen never caught any of the touch events, but i solved the issue by adding a element inside the map element, and that somehow made the map stop catching all events. But thank you very much for the other solution.