Click not detected on google-map even using data-tap-disabled="true"

ionic-v1
#1

I’m sorry to write a post similar to others but I have this problem and I can’t find a working solution, I have this view

<ion-view title="Places" class="background">
    <ion-content scroll="false">
        <div data-tap-disabled="true">
            <google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" >

                <markers models="pictures" coords="'self'" doCluster="true" click="onPictureSelected" options="'options'">
                </markers>
            </google-map>
        </div>
    </ion-content>
</ion-view>

and I’m using tabs

<ion-tab title="Places" icon="ion-map" ui-sref="tabs.places">
    <ion-nav-view name="places-tab"></ion-nav-view>
</ion-tab>

I’m using angular google maps and in the controller I’m binding the onPictureSelected function. Everything is working well on desktop but when I run the application on android (Nexus 7 2013) the tap/click is not triggered.

I’ve already searched and read similar problems on github issues like this one but I can’t get it working.

#2

Hi,

I tried using AngularJS Google Maps using the data-tap-disabled attribute and it did not work as well. I was trying to click on a marker and get it’s infoWindow to show up.

I finally switched to Leaflet Maps. It works perfectly with data-tap-disabled. There is also an angular directive for Leaflet if you are interested.

1 Like
#3

same here, leaflet is the leader in slippy maps … works well, agree with kunalnagar

#4

Using leafletjs and data-tap-disabled=true breaks my maps after moving them… :
Without data-tap-disabled it works, but the popups don’t open…
In the browser everuthing’s fine… Any idea?

Thanks,
Luís

#5

Probably you have fixed this problem. I had the same problem as you using angular-gmaps, but I fixed it using data-tap-disabled=“true”. The infowindows for markers under the directive ui-gmap-windows

<div id="map_canvas" data-tap-disabled="true">
                <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
                    <ui-gmap-markers models="markers" coords="'self'" icon="'icon'">
                        <ui-gmap-windows>
                            <div ng-non-bindable>
                                <h3>{{description}}:</h3>
                            </div>
                        </ui-gmap-windows>
                    </ui-gmap-markers>
                </ui-gmap-google-map>
            </div>
#6

Same here. I haven’t found a solution yet.

#7

Did anybody could solve it?