Пользовательский ввод данных при нажатии на маркер с использованием угловых карт Google

Question

Я использую карты google google и я хотел бы настроить стиль infoWindow, который отображается на клике маркера. В теге ui-gmap-window есть настраиваемые параметры, и он отлично работает автономно. Однако, когда я пытаюсь использовать его в теге маркеров (ui-gmap-markers) - он не отображает пользовательский стиль infoWindow при нажатии маркера. Plunkr ясно объясняет проблему.

http://plnkr.co/edit/Mif7wX1eEkwtfAQ93BCI?p=info

 <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds"> 
<!-- WORKS FINE STANDLONE WINDOW --> 
      <ui-gmap-window show="show1" coords="map.center" options="windowOptions"></ui-gmap-window> 

      <ui-gmap-markers models="randomMarkers" coords="'self'" icon="'icon'" click="onClick"> 
<!-- DOES NOT WORK INSIDE MARKERS TAG--> 
       <ui-gmap-windows show="show" options="windowOptions"> 

       </ui-gmap-windows> 
      </ui-gmap-markers> 
     </ui-gmap-google-map> 

Answer 1

Вы должны использовать тот же метод, как вы делаете в ваших меток. Поскольку для Windows требуется имя свойства в массиве моделей.

Так сначала добавьте это в коде

 var createRandomWindows = function (i, bounds, idKey) { 
     if (idKey == null) { 
      idKey = "id"; 
     } 
     var ret = { 
      title: 'm' + i, 
      options: { 
        boxClass: "infobox", 
        boxStyle: { 
         backgroundColor: "blue", 
         border: "1px solid red", 
         borderRadius: "5px", 
         width: "100px", 
         height: "100px" 
        }, 
        content: "Window options box work standalone ------------BUT DOES NOT work on marker click" 
       } 
     }; 
     ret[idKey] = i; 
     return ret; 
    } 
$scope.createWindows = []; 

и добавить эти

var windows = []; 
windows.push(createRandomWindows(i, $scope.map.bounds)) 
$scope.randomWindows = windows; 

в вас старый код, как этот

$scope.$watch(function() { return $scope.map.bounds; }, function(nv, ov) { 
     // Only need to regenerate once 
     if (!ov.southwest && nv.southwest) { 
      var markers = []; 
      var windows = []; 
      for (var i = 0; i < 50; i++) { 
       markers.push(createRandomMarker(i, $scope.map.bounds)) 
       windows.push(createRandomWindows(i, $scope.map.bounds)) 
      } 
      $scope.randomMarkers = markers; 
       $scope.randomWindows = windows; 


     } 
    }, true); 

В вас HTML добавить эти models="randomWindows" options="'options'" в <ui-gmap-windows> </ui-gmap-windows> теге например

<ui-gmap-windows models="randomWindows" coords="'self'" options="'options'" icon="'icon'"> 
     </ui-gmap-windows> 

И теперь он должен работать :)

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