<div class="controller-section" ng-controller="Fabric.MapController">

  <div compile="template"></div>

  <script type="text/ng-template" id="pageTemplate">

    <ul>
      <li ng-repeat="marker in myMarkers">
        <a href="" ng-click="myMap.panTo(marker.getPosition())">{{marker.title}}</a>
      </li>
    </ul>

    <!-- this is the confusing part. we have to point the map marker directive
      at an existing google.maps.Marker object, so it can hook up events -->
    <div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]" ui-event="{'map-click': 'openMarkerInfo(marker)'}"></div>

    <div ui-map-info-window="myInfoWindow">
      <h3>
        <a ng-href="#/fabric/container/{{currentMarker.title}}">Container {{currentMarker.title}}</a>
      </h3>
      <!--
          Lat: <input ng-model="currentMarkerLat">, Lng: <input ng-model="currentMarkerLng">
          <a ng-click="setMarkerPosition(currentMarker, currentMarkerLat, currentMarkerLng)">Set Position</a>
      -->
    </div>

    <!-- Giving the div an id="map_canvas" fix problems with twitter bootstrap affecting
    google maps -->
    <div id="map_canvas" ui-map="myMap" class="map" ui-event="{'map-click': 'addMarker($event)', 'map-zoom_changed': 'setZoomMessage(myMap.getZoom())' }" ui-options="mapOptions"></div>

    <style type="text/css">
      .map {
      height: 500px;
      width: 100%;
      /*
      width: 600px;
      */
      }
    </style>

  </script>


</div>
