角度js：Googleマップにマーカーを追加できません

Question

Googleマップにマーカーを追加しようとしていますが、残念ながら追加されません。

マップにはマーカーが1つしかありません。

は、ここに私のHTMLです：

<div ng-app="myApp" ng-controller="gMap"> 
    <ui-gmap-google-map 
    center='map.center' 
    zoom='map.zoom' aria-label="Google map"> 

    <ui-gmap-marker ng-repeat="marker in markers" 
     coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id"> 
     <ui-gmap-window> 
     <div>{{marker.window.title}}</div> 
     </ui-gmap-window> 
    </ui-gmap-marker> 

    </ui-gmap-google-map> 
</div> 

私の角度のコードは次のようになります。

var myApp = angular.module('myApp', ['uiGmapgoogle-maps']); 

myApp.controller("gMap",function($scope){ 
    $scope.map = { 
    center: { latitude: 39.8282, longitude: -98.5795 }, 
    zoom: 4 
    }; 

    $scope.markers.id = "1"; 
    $scope.markers.coords.latitude = "40.7903"; 
    $scope.markers.coords.longitude = "-73.9597"; 
    $scope.markers.window.title = "Manhattan New York, NY"; 

}); 

CODEPEN

Answer 1

コードを少し変更して、結果を得ました。

var myApp = angular.module('myApp', ['uiGmapgoogle-maps']); 

myApp.controller("gMap",function($scope){ 
    $scope.map = { 
    center: { latitude: 39.8282, longitude: -98.5795 }, 
    zoom: 4 
    }; 

    $scope.marker = { 
    coords: { latitude: 39.8282, longitude: -98.5795 }, 
    id: 4 , 
    window: { title: "Manhattan New York, NY" } 
    }; 


}); 

とHTMLになった：

<div ng-app="myApp" ng-controller="gMap"> 
    <ui-gmap-google-map 
    center='map.center' 
    zoom='map.zoom' aria-label="Google map"> 

    <ui-gmap-marker 
     coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id"> 
     <ui-gmap-window> 
     <div>{{marker.window.title}}</div> 
     </ui-gmap-window> 
    </ui-gmap-marker> 

    </ui-gmap-google-map> 
</div> 

CODEPEN

Answer 2

変化にコントローラ：

myApp.controller("gMap",function($scope){ 
    $scope.map = { 
    center: { latitude: 39.8282, longitude: -98.5795 }, 
    zoom: 4 
    }; 

    $scope.markers = []; 
    $scope.marker = { 
    id: 1, 
    coords: { 
     latitude: "40.7903", 
     longitude: "-73.9597", 
    }, 
    window: { 
     title: "Manhattan New York, NY", 
    } 
    }; 
    $scope.markers.push($scope.marker); 
}); 

なぜ？

markersは、HTMLの配列です。コントローラでは、それを宣言していませんでした。

の代わりにオブジェクトです。

あなたは今以上のマーカーを作成し、$scope.markers.push($scope.otherMarker);

Answer 3

あなたのコードは問題なく動作してマップ内の複数のポイントを表示するにはmarkersにプッシュできます。ただ、追加ng-repeat

がありますどのmarkers配列はここで働いてcodePenです：http://codepen.io/anon/pen/WxpaqE