How to put two maps on the same page, with one marker in each map with angular google maps?

Question

I use angular-google-maps version 2.0.9 to display two maps on one page, each one with a marker. But the 2 markers display in the same map. Any idea?

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
      }
   }

Plunker here

If I remove the marker tag in the first map, the marker2 correctly displays in map2.

Answer 1

Use as a work around.

I believe there is a issue with binding as it would only reference the first instance of the map in the DOM when using .

Working example: http://plnkr.co/edit/DzPosZ85cMjs7hretr66?p=preview

<div class="map_canvas" ng-controller="mainCtrl">
  <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" >
    <ui-gmap-markers models='markers' coords="'coords'" options="marker.options" idkey="marker.id">
    </ui-gmap-markers>
  </ui-gmap-google-map>
  <ui-gmap-google-map center="map2.center" zoom="map2.zoom" draggable="true" >
    <ui-gmap-markers models="markers2" coords="'coords'" options="marker2.options" idkey="marker2.id">
    </ui-gmap-markers>
  </ui-gmap-google-map>
</div>

---