<div class="container main-container">
    <div class="row">
        <div class="col-sm-8">
            <loader loading="spinner.isLoading('road-details')">
                <h3 class="page-header">
                    <i class="fa fa-road" aria-hidden="true"></i>&nbsp;{{road.RutaTramo}}
                </h3>
                <div class="road-details">
                    <span ng-show="road.RutaTipo"><strong>Tipo:</strong>{{road.RutaTipo}}</span>
                    <span ng-show="road.RutaLongitud"><strong>Logitud:</strong>{{road.RutaLongitud}} Km</span>
                    <span ng-show="road.RutaEstado"><strong>Estado:</strong>{{road.RutaEstado}}</span>
                    <span ng-show="road.RutaSeccion"><strong>Sección:</strong>{{road.RutaSeccion}}</span>
                    <span ng-show="road.RutaObservacion"><strong>Observación:</strong>{{road.RutaObservacion}}</span>
                </div>
                <ui-gmap-google-map center='road.Mapa.center' zoom='road.Mapa.zoom'>
                    <ui-gmap-marker coords="marker.coords" idkey="marker.id" options="marker.options"></ui-gmap-marker>
                </ui-gmap-google-map>
            </loader>
        </div>
    </div>
</div>