<div class = "row">
  <div class = "col-xs-12">
    <h1>Metronet Map</h1>
    <div map-lazy-load="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3rQOp26I5a21VQhwLal8Z1x3XGHjXfm4">
      <ng-map
        default-style="false"
        class="metronet"
        id="foobar"
        center="0,0"
        disable-default-u-i="true"
        map-type-id="ROADMAP"
        zoom-control="true"
        min-zoom="2"
        styles="{{vm.mapStyles}}"
      >
        <!--Markers-->
        <marker
          ng-repeat="uni in vm.unis"
          id="marker-{{uni.id}}"
          position="{{uni.latlng.toString()}}"
          icon="{{vm.MapConfig.marker}}"
          on-click="vm.showUni(uni)"
        >
        </marker>

        <!--Marker Info Window-->

        <info-window id = "uni-info">
          <div class = "marker-info">
            <h4>{{vm.current_uni.name}}</h4>
            <p>
              <b>LatLng: </b>{{vm.current_uni.latlng.toString()}}<br/>
              <b>Cpe id: </b>{{vm.current_uni.cpe_id}}<br/>
              <b>Tenant: </b>{{vm.current_uni.tenant}}<br/>
            </p>
            <button ng-show="vm.canCreateEline" ng-click="vm.createConnection(vm.current_uni)()">Create connection</button>
            <button ng-show="!vm.canCreateEline && !uni.eline_start" ng-click="vm.finishConnection(vm.current_uni)">Finish connection</button>
          </div>
        </info-window>

        <!--Connections-->

        <shape
          ng-repeat="eline in vm.elines"
          name="polyline"
          id="eline-{{eline.id}}"
          path="{{eline.path}}"
          stroke-color="{{vm.colorLine(eline.backend_status)}}"
          stroke-opacity="1.0"
          stroke-weight="5"
          on-click="vm.elinePanel({{eline}}, true)"
        >
        </shape>

      </ng-map>

    </div>
    Changes may not display until page refresh.
  </div>
</div>
<!--"https://maps.googleapis.com/maps/api/js?key=AIzaSyA3rQOp26I5a21VQhwLal8Z1x3XGHjXfm4"-->