Angular-google-mapsに複数のマーカーを追加する

Question

角度のあるプロジェクトで複数のマップマーカーを表示するのが最も難しいです。私はretsAPIと呼ばれるサービスを持っています。ここで私は地元のMLSデータベースに家のリストを照会しています。私はこれらのアイテムをGoogle mapesに表示しようとしています。ここに私のコントローラがあります。

function retsMapController($scope, uiGmapGoogleMapApi, uiGmapIsReady, retsAPI) { 
$scope.map = { 
    center: { 
     latitude: 43.6376107, 
     longitude: -116.314943 
    }, 
    zoom: 10 
}; 
$scope.options = { 
     scrollwheel: false, 
     streetViewControl: false, 
     mapTypeControl: false, 
     scaleControl: false, 
     rotateControl: false, 
     zoomControl: false 
}; 

$scope.markers = []; 
uiGmapIsReady.promise() 
    .then(function (instances) { 
     console.log(instances[0].map); 
    }) 
    .then(function() { 
     retsAPI.default().success(function(result) { 
      $scope.results = result; 
      var i = 0; 
       result.forEach(function(item) { 
        $scope.markers.push({ 
         id: Date.now()+i, 
         coords: { 
          latitude: item['LMD_MP_Latitude'], 
          longitude: item['LMD_MP_Longitude'] 
         } 
        }); 
       i++; 
      }); 
      console.log("MARKER: ", $scope.markers); 
    }); 


}); 
uiGmapGoogleMapApi.then(function (maps) { 
    angular.extend($scope.map, { 
     options: { 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      zoomControlOptions: { 
       style: google.maps.ZoomControlStyle.LARGE, 
       position: google.maps.ControlPosition.LEFT_CENTER 
      } 
     } 
    }); 
}); 

ここは自分のHTMLファイルです。

<div id="real_angular" ng-controller="retsMap" ng-app="real_angular"> 
<div rets-search-form></div> 
{{ markers }} 
<ui-gmap-google-map 
    ng-if="map.center" 
    center='map.center' 
    zoom='map.zoom' 
    options='options' 
    refresh="true"> 
    <ui-gmap-markers 
     models="markers" 
     coords="'self'" 
     icon="'icon'"> 
    </ui-gmap-markers> 
</ui-gmap-google-map> 

、これは$ scope.markers

[{"id":1481596995980,"coords":{"latitude":"43.7335624694824","longitude":"-116.400283813477"}},{"id":1481596995981,"coords":{"latitude":"44.9327393","longitude":"-116.0692291"}},{"id":1481596995982,"coords":{"latitude":"44.846809387207","longitude":"-116.179756164551"}},{"id":1481596995983,"coords":{"latitude":"44.0762062072754","longitude":"-116.978248596191"}},{"id":1481596995984,"coords":{"latitude":"44.6780061721802","longitude":"-116.120807826519"}},{"id":1481596995985,"coords":{"latitude":"44.8671951293945","longitude":"-116.026954650879"}},{"id":1481596995986,"coords":{"latitude":"43.0574607849121","longitude":"-114.13264465332"}},{"id":1481596995987,"coords":{"latitude":"43.7259407043457","longitude":"-116.800910949707"}},{"id":1481596995988,"coords":{"latitude":"42.55171340147","longitude":"-114.460141584277"}},{"id":1481596995989,"coords":{"latitude":"44.3812294006348","longitude":"-115.982734680176"}},{"id":1481596995990,"coords":{"latitude":"42.9506072998047","longitude":"-115.298492431641"}},{"id":1481596995991,"coords":{"latitude":"42.5505142211914","longitude":"-114.454963684082"}},{"id":1481596995992,"coords":{"latitude":"43.677565","longitude":"-116.0496032"}},{"id":1481596995993,"coords":{"latitude":"44.2447853088379","longitude":"-116.953323364258"}},{"id":1481596995994,"coords":{"latitude":"43.5853805541992","longitude":"-116.189315795898"}},{"id":1481596995995,"coords":{"latitude":"43.6678466796875","longitude":"-116.680221557617"}},{"id":1481596995996,"coords":{"latitude":"43.6502661556005","longitude":"-116.251468285918"}},{"id":1481596995997,"coords":{"latitude":"43.6551094055176","longitude":"-116.685394287109"}},{"id":1481596995998,"coords":{"latitude":"44.5916213989258","longitude":"-116.669593811035"}},{"id":1481596995999,"coords":{"latitude":"42.6074829101563","longitude":"-114.768821716309"}}] 

の結果であり、また、私は私のGoogleのコントロールを失っていることが表示されます。私はそれらが消えるようになったのかどうかはわかりません。あなたはcoords="'coords'"へcoords="'self'"から結合マーカーを交換する必要が$scope.markersのデータ形式を考えると

Answer 1

：

<ui-gmap-markers models="markers" coords="'coords'" icon="'icon'"> 
</ui-gmap-markers> 

例

Demo