Header bar clicks passing to map div

[husmen73]

I have header bar and map which has static height.

First image:

Second image:

There is an setClickable() function but how can I use it when page scrolled to bottom if map div goes to under header bar.

I could not find to solve this problem.

[wf9a5m75]

Um, in current mechanism, this plugin does not support z-index property. It means this plugin does not design for this case.

[husmen73]

Okay. This is a problem for me. Will you write some code about z-index for newer versions?

Also, you should merge clusters from this fork : https://github.com/identy/cordova-plugin-googlemaps

[wf9a5m75]

Sorry, but detecting z-index is difficult for this plugin. And I don't merge any pull requests at this time. The source code of this plugin will be changed drastically in next version.

[douglasjunior]

I have a similar problem, could you tell me if it's related?

If open a HTML Popup (dialog) over the map, the touch events is not captured by Popup, but by the map.

Same problem if the header bar is over the map.

It happens both Android and iOS. With JavaScript maps I had no problems.

Ionic 1.7.16 Cordova 6.3.0 cordova-plugin-googlemaps 1.3.9

[wf9a5m75]

map.setClickable(true/false)

[douglasjunior]

I was hiding the map with ng-hide (I believe it is the same effect).

The problem is the second question, where is the scroll.

How do I know if the map is behind the Header Bar and then disable the click?

[wf9a5m75]

As I said above, the plugin does not support the fixed header (because z-index does not support) currently.

The plugin considers the child elements, but other elements are not. https://github.com/mapsplugin/cordova-plugin-googlemaps/blob/master/www/googlemaps-cdv-plugin.js#L334-L361

[douglasjunior]

Got it. Thank you.

[wf9a5m75]

Sorry

[douglasjunior]

Guys, I found a solution that worked for me.

If the user schrolls the screen I lock the map: map.setClickable(false)

So, when the user touchs on map, I scroll the screen to top: $ionicScrollDelegate.scrollTop()

My View:

<ion-view view-title="Coordinates" >
  <ion-content class="padding" on-scroll="onScroll()"  >
      ...
      <div id="map" on-touch="onMapTouch($event)" style="width: 100%;" ></div>
      ...
  </ion-content>
</ion-view>

My Ctrl:

app.controller('CoordinatesCtrl', function($scope, $ionicScrollDelegate, $ionicGesture) {

  $scope.onScroll = function(){
    console.log("onScroll positon: " + $ionicScrollDelegate.getScrollPosition().top);
    if ($ionicScrollDelegate.getScrollPosition().top <= 35) {
      $scope.map.setClickable(true);
    } else {
      $scope.map.setClickable(false);
    }
  }

  $scope.onMapTouch = function(event){
    $ionicScrollDelegate.scrollTop();
  }

});

[yurik94]

@douglasjunior You're a life saver.