Div over the map hard to click/fire function

[Hurinj]

I have one div with an img over the map which is on top. When I click on one specific (like 10% of the div) space of the img, it fires the function I want. But if i click on the 90% left of the img nothing it fired.

Is there a way to correct this bug ? If I set the map clickable to false, there is no problem but I'd like to keep the map clickable.

Thank you.

[wf9a5m75]

On the master branch, the the img tag must be under the map div.

<div id="map_div">
  <img src='...'>
</div>

[Hurinj]

Yes I know, in fact it is a normal div with a font awesome icon. I call a ng-click like above. It only calls the ng-click in a specific place of the div :/ Here is my code :

<div class="row" style="width: 100%; margin-left: 0px;">\
        <div id="appeler" class="col-lg-6 col-sm-6 col-xs-6" ng-click="mapCtrl.createConversationDiv();">\
                  <i class="fa fa-commenting-o fa-5x" style="color: #5bf6a3; margin-top: 15px;"></i>\
        <div class="ligne_verticale" ></div>\
        </div>\
        <div id="present" class="col-lg-6 col-sm-6 col-xs-6" ng-click="mapCtrl.checker()">\
                 <i class="fa fa-check fa-5x" style="color: #5bf6a3; margin-top: 18px;"></i>\
        </div>\
</div>

[wf9a5m75]

I'm sorry but I'm not familiar with Angular at all. Could you show me the screen capture?

[Hurinj]

Yes this is the top div html with the icon commenting

<div class="row" style="width: 100%; margin-left: 0px;">
        <div id="appeler" class="col-lg-6" ng-click="mapCtrl.createConversationDiv();">
        <i class="fa fa-commenting-o fa-5x" style="color: #5bf6a3; margin-top: 15px;"></i>
</div>

(I'd like to keep the map clickable)

represented by :

[wf9a5m75]

Um, I'm not clear yet. It seems the map div is bigger than tag?

And could you take a screen capture with map.setDebuggable(true)? https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Map#mapsetdebuggable

map.setDebuggable( true ) tells you where the plugin recognizes the clickable region (red and green).

[Hurinj]

The map div is map_canvas, it contains the previous code.

It is really weird, with the debuggable true, the div has no color (green or red) ... !

<div ng-controller="MapController as mapCtrl" style="height:100%;width:100%;" id="map_canvas">
...
<div class="row" style="width: 100%; margin-left: 0px;">
        <div id="appeler" class="col-lg-6" ng-click="mapCtrl.createConversationDiv();">
        <i class="fa fa-commenting-o fa-5x" style="color: #5bf6a3; margin-top: 15px;"></i>
</div>
...
</div>

I put the div in white to see if it was red or green, but there is nothing. Maybe it is because, the div is not shown at the beginning. It is at something top : -100% and when I fire a fuction it drops down ! Maybe the maps doesn't calculate something What do you think ?

[wf9a5m75]

Do you set position: fixed or something?

Or if you change the position of child elements, you have to execute map.refreshLayout(). Do you do that?

[Hurinj]

Yes it is fixed position because I don't want the user be able to scroll to the hidden div... likeposition: fixed; top: -100%;

If I set no position, the function is well fired but the div is not hidden at the beginning. Do you have a solution ?

[wf9a5m75]

position: fixed is not supported for the current version (probably, I forgot the detail). So you can not use it.

Instead of that, how about display: none and display:block?

[Hurinj]

Ok, thank you very much for your time ! It is working with display: block :)

[wf9a5m75]

Sound great!