Angular google maps info window icons not clickable

Question

I'm facing an issue in angular google maps.

As shown in the image below, I'm having 2 icons in the info window ( <ui-gmap-windows show="show"></ui-gmap-windows> ).

My DOM is something like this

<ui-gmap-google-map id="mapDiv" center='map.center' zoom='map.zoom'>
                    <!--<ui-gmap-marker  idKey="marker.id" coords="marker.coords"></ui-gmap-marker>-->
                    <ui-gmap-markers models="markers" coords="'self'">
                        <ui-gmap-windows show="show">
                            <div ng-non-bindable>
                                <div>
                                    <label class="markerToolTipLabel">{{name}}</label>
                                    <div class="icons">
                                        <span class="glyphicon glyphicon-eye-open customGlyph" ng-mouseover="glyphClick()" ng-click="glyphClick()"></span>
                                        <span class="glyphicon glyphicon-eye-close customGlyph" ng-click="glyphClick()"></span>
                                    </div>
                                </div>
                            </div>
                        </ui-gmap-windows>
                    </ui-gmap-markers>
                </ui-gmap-google-map>

And my controller (glyphClick function) is simply doing a console log.

But when I click on the icons, I'm not getting any output on the console.

What could be the issue?? How to solve this?

Please help!!

Answer 1

Apparently it occurs since glyphClick event declared in controller scope that is not accessible from the ui-gmap-windows child scope.

Solution

First we need to introduce an additional controller:

appMaps.controller('infoWindowCtrl', function($scope) {
    $scope.glyphClick = function() {
        console.log('Button clicked!');
    }
});

and then specify the following layout for ui-gmap-windows directive:

 <ui-gmap-windows show="show">
                <div>
                    <div>
                        <label class="markerToolTipLabel" ng-non-bindable>{{name}}</label>
                        <div class="icons" ng-controller="infoWindowCtrl">
                            <span class="glyphicon glyphicon-eye-open customGlyph" ng-mouseover="glyphClick()" ng-click="glyphClick()"></span>
                            <span class="glyphicon glyphicon-eye-close customGlyph" ng-click="glyphClick()"></span>
                        </div>
                    </div>
                </div>
  </ui-gmap-windows>

Note: ng-non-bindable attribute is defined for a label

Working example

 var appMaps = angular.module('appMaps', ['uiGmapgoogle-maps']); appMaps.controller('mainCtrl', function($scope,uiGmapIsReady) { $scope.map = { center: { latitude: 40.1451, longitude: -99.6680 }, zoom: 4, bounds: {} }; $scope.options = { scrollwheel: false }; var getRandomLat = function() { return Math.random() * (90.0 + 90.0) - 90.0; }; var getRandomLng = function () { return Math.random() * (180.0 + 180.0) - 180.0; }; var createRandomMarker = function(i) { var ret = { latitude: getRandomLat(), longitude: getRandomLng(), name: 'Location:' + i, show: false, id: i }; return ret; }; $scope.markers = []; for (var i = 0; i < 200; i++) { $scope.markers.push(createRandomMarker(i)); } }); appMaps.controller('infoWindowCtrl', function($scope) { $scope.glyphClick = function() { logInfo('Glyph clicked!'); } }); function logInfo(message){ console.log(message); //document.getElementById('output').innerHTML += message; alert(message); } 

 .angular-google-map-container { position: absolute; top: 0; bottom: 0; right: 0; left: 0; } 

 <script src="https://code.angularjs.org/1.3.14/angular.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script> <script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <div ng-app="appMaps" id="map_canvas" ng-controller="mainCtrl"> <ui-gmap-google-map id="mapDiv" center='map.center' zoom='map.zoom'> <ui-gmap-markers models="markers" coords="'self'"> <ui-gmap-windows show="show"> <div> <div> <label class="markerToolTipLabel" ng-non-bindable>{{name}}</label> <div class="icons" ng-controller="infoWindowCtrl"> <span class="glyphicon glyphicon-eye-open customGlyph" ng-mouseover="glyphClick()" ng-click="glyphClick()"></span> <span class="glyphicon glyphicon-eye-close customGlyph" ng-click="glyphClick()"></span> </div> </div> </div> </ui-gmap-windows> </ui-gmap-markers> </ui-gmap-google-map> </div> <pre id="output"></pre> 

Plunker

Answer 2

Remove ng-non-bindable from your code. It is preventing angular to attach watch functionality in it.

<ui-gmap-windows show="show">
   <div >
       <div>
          <label class="markerToolTipLabel">{{name}}</label>
              <div class="icons">
                 <span class="glyphicon glyphicon-eye-open customGlyph" ng-mouseover="glyphClick()" ng-click="glyphClick()"></span>
                  <span class="glyphicon glyphicon-eye-close customGlyph" ng-click="glyphClick()"></span>
               </div>
           </div>
       </div>