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

  <div class="span12 well">
    <form>
      <strong>Notice:</strong> locations of the containers can be inaccurate when Fabric had to 'guess' the location using the <a href="http://freegeoip.net">freegeoip.net</a> online service.
    </form>

    <div ng-show="first" class="controller-section centered">
      <p>Loading geo locations for containers, and updating map when loading complete ...</p>
    </div>
  </div>

  <div>
    <!-- this is the map -->
    <div compile="template"></div>

    <!-- we want the list of containers below the map -->
    <ul>
      <li ng-repeat="marker in myMarkers">
        <a href="" title="{{marker.tooltip}}" ng-click="myMap.panTo(marker.getPosition())">{{marker.title}}</a>
      </li>
    </ul>

    <script type="text/ng-template" id="pageTemplate">
      <!-- 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>
      </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-options="mapOptions"></div>

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

    </script>
  </div>

</div>
