Start line:  
End line:  

Snippet Preview

Snippet HTML Code

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

  <div class="span12 page-padded">
      <strong>Notice:</strong> locations of the containers can be inaccurate when Fabric had to 'guess' the location using the <a href=""></a> online service.

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

    <!-- this is the map -->
    <div class="span12 page-padded" compile="template"></div>

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

    <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">
          <a ng-href="#/fabric/container/{{currentMarker.title}}">Container {{currentMarker.title}}</a>

      <!-- 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%;


New to GrepCode? Check out our FAQ X