angularjs - Angular Googleマップを使用して、各マップに1つのマーカーを使用して、同じページに2つのマップを配置する方法は?

Question

angular-google-mapsバージョン 2.0.9 を使用して、1 ページに 2 つのマップを表示し、それぞれにマーカーを付けます。ただし、2 つのマーカーは同じマップに表示されます。何か案が？

html :

<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
  <ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
  </ui-gmap-marker>
</ui-gmap-google-map>
<ui-gmap-google-map center="map2.center" zoom="map2.zoom" draggable="true" options="options">
  <ui-gmap-marker coords="marker2.coords" options="marker2.options" events="marker2.events" idkey="marker2.id">
  </ui-gmap-marker>
</ui-gmap-google-map>

controller.js :

  $scope.map = {center: {latitude: 40.1451, longitude: -99.6680 }, zoom: 4 };
  $scope.map2 = {center: {latitude: 40.1451, longitude: -99.6680 }, zoom: 4 };
  $scope.marker = {
      id: 0,
      coords: {
        latitude: 40.1451,
        longitude: -99.6680
      },
   };
   $scope.marker2 = {
      id: 1,
      coords: {
        latitude: 42,
        longitude: -99
      }
   }

プランカーはこちら

最初のマップでマーカー タグを削除すると、marker2 が map2 に正しく表示されます。