<ion-icon name="md-arrow-round-back" (tap)="backButton()" class="backButton"></ion-icon>

<agm-map [latitude]="lat" (mapReady)="onMapReady($event)" [styles]="styles" [longitude]="lng" [zoom]="zoom" [clickableIcons]="clickableIcons" [zoomControl]="false" [streetViewControl]="false">
 <agm-direction *ngIf="started && !terminado" [fitBounds]="bounds" (onChange)="changeDirection($event)" [origin]="origin" [destination]="destination" [renderOptions]="renderOptions" [markerOptions]="markerOptions"></agm-direction>
 <agm-marker *ngIf="!started || terminado" [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
<div class="bubble_driver_info" *ngIf="!started">
  <b>Tránsito aún no iniciado:</b> podrás ver dónde está tu pedido el día que esté en tránsito, lo entregaremos en éste lugar. 
</div>
<div class="bubble_driver_info" *ngIf="terminado && started">
  <b>Pedido entregado:</b> El pedido ya fue entregado en el punto indicado
</div>
<div class="bubble_driver_info" *ngIf="!terminado && started">
  <b>En condiciones actuales:</b><br />
  Actualización: {{driverInformation.when | date:'dd/MM/yy HH:mm'}} <br />
  Tiempo tránsito: {{driverInformation.timer}} <br />
  Distancia: {{driverInformation.distance}} 
</div>