Angular UI-map Multiple call to a button function inside a uiMapInfoWindow

Question

I use angular UI-Map and got a problem. I have markers on a map, that open an InfoWindow on click. Each InfoWindow contains a button. To reproduce the bug: open an InfoWindow and click on the button, the function callback is called once => OK Click on another marker => the InfoWindow is closed, another one is opened Click on the button, then the callback function is called twice => Bug

http://plnkr.co/edit/x71d9jZ7vL5TRTWBdK40?p=preview

MyJS:

angular.module('plunker', ['ui.event', 'ui.map'])

.controller("MainCtrl", function ($scope) {
  $scope.markers = []

  $scope.mapOptions = {
            center: new google.maps.LatLng(22.59373, 5.97656),
            zoom: 3,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
  $scope.log = function (message) {
    alert(message);
  };

   $scope.$watch('myMap', function (newVal){
       if (newVal) {           
        var coord = [new google.maps.LatLng(20 , 4), new google.maps.LatLng(21 , 9), new google.maps.LatLng(23 , 13)];
        coord.forEach(createMarker)
    }
   });

   $scope.openMarkerInfo = function(marker) {
            $scope.infoWindow.close();
            $scope.infoWindow.open($scope.myMap, marker);
   } 
  function createMarker(loc) {
      var marker = new google.maps.Marker({
              map: $scope.myMap,
              position: loc
          });

      $scope.markers.push(marker)
  }

});


function onGoogleReady() {
  angular.bootstrap(document.getElementById("map"), ['plunker']);
}

HTML:

<div id="map" data-ng-controller="MainCtrl">
  <div ui-map="myMap" ui-options="mapOptions" class="map-canvas"></div>

  <div style="display: none;" ng-repeat="marker in markers" ui-map-marker="markers[$index]" ui-event="{'map-click': 'openMarkerInfo(marker)'}" ></div>

  <div class="infoWindow"  ui-map-info-window="infoWindow" >
     <button ng-click="log('tt')">Show</button>
  </div>
</div>

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=onGoogleReady"></script>

What can I do to solve this problem? It seems like the window are not correct deleted when closing.

Is that a bug or just my stupidness? ;)

Answer 1

You may take a look at ui-gmap-markers there is a special directive for multiple markers

This is an example that i found in an old project

<ui-gmap-google-map center='map.center' zoom='map.zoom'>

    <ui-gmap-markers models="markers" coords="'self'" options="markerOptions" events="markerEvents" icon="'icon'">
    </ui-gmap-markers>

    <ui-gmap-window coords="model.selectedMarker"show="model.selectedMarker.show" templateUrl="'/app/controls/gMapsControl/mapInfoWindow.html'" templateParameter="model.selectedMarker" closeClick="model.closeInfoWindow(model)">
    </ui-gmap-window>
</ui-gmap-google-map>

Where this is the template for an own directive which gets model as attribute. The model is defined on my page controller

this.$scope.mapModel = {
            map: {
                center: { 
                    latitude: 52.5075419, 
                    longitude: 13.4251364 
                }, 
                zoom: 10 
             },
             markers : [],
             markerCallback: this.markerCallback,
             selectedMarker: undefined,
             closeInfoWindow: (model) => {
                model.selectedMarker.show = false;
             }
        };

I hope it helps you. It´sa bit difficult to extract the important parts

Answer 2

I used another directive called ui-gmap-markers. It seems that UI-MAP has a bug when using multiple markers.