Ionic ngMap infowindow not functioning on device

Question

I've been working with the awesome ngMap directive created by allenhwkim but having issues with markers displaying info-windows on the device. I have tried different ways of nesting "data-tap-disabled='true'" and "scroll='false'" for different elements and with no luck.

I really like the markercluster module he's put together so I've been trying to rely on that, as we'll need to plot multiple markers across a large area. There's a great example in the repo with plotting shops around the globe using custom directives, and when zoomed enough to see a single marker an info-window appears with some data when the click event is fired. Everything works when testing from Chrome, but when testing on an Android device and the iOs emulator the info-windows do not appear. But, it seems like the click is being registered because the screen/map shift, on the device, as if the info-window is supposed to appear (like testing from Chrome).

myDirective.js

.directive('stuffInfo', function(SomeData) {

    var StuffInfo = function(s, e, a) {
        this.scope = s;
        this.element = e;
        this.attrs = a;
        this.show = function(stuffId) {
            this.element.css('display', 'block');
            var showStuff = SomeData.getDataStuff(stuffId);
            var someMoreStuff = showStuff.stuff_users;
            s.someMoreStuff = someMoreStuff;

            this.s.$apply();
        }
        this.hide = function() {
            this.element.css('display', 'none');
        }
    };
    return {
        templateUrl: '/templates/stuff-info.html',
        link: function(scope, e, a) {
            scope.gameInfo= new GameInfo(scope, e, a);
        }
    }
})

map.html

<div id="map-container">
    <map zoom="12" center="[34.784426, -92.333411]" disable-default-u-i="true">

    </map>

    <div add-stuff-info="" class="custom-control">Add Stuff</div>
</div>

The controller attaches the click-listener

var marker = new google.maps.Marker(stuff);
google.maps.event.addListener(marker, 'click', function() {
    $scope.stuff = this;

    map.setCenter(this.getPosition());
    $scope.stuffInfo.show($scope.stuff._id);
});

style.css

div#map-container div[add-stuff-info] { position: absolute; display: none; top: 5px; right: 5px; bottom: 5px; width: 40% } div#map-container div[add-stuff-info] a.hide-link { float:right } div#map-container div[add-stuff-info] table { width: 100% } div#map-container div[add-stuff-info] table td { text-align: left; padding: 5px; border: 1px solid #ccc }

I cant seem to figure out the issue here. One thing I have realized is when removing this.element.css('display', 'block'); from the directive and testing from Chrome the browser seems to act like the device does - map shifts as it will show the info-window...

Answer 1

I was having the exact same problem! Include tag data-tap-disabled="true" on

like:

<ion-content data-tap-disabled="true" class="has-header padding">

I hope help you !!