<ion-header>
    <div class="nav_header">
        <button class="nav_btn nav_back floatLeft" (click)="goBack()">
            <img src="../assets/Group17_2.png">
        </button>
        <div class="nav_title floatLeft">
            <h4>ORDER TRACKING</h4>
        </div>
        <div class="clear"></div>
    </div>
</ion-header>
<ion-content>
    <div class="trackorder_div">
        <agm-map [zoom]="20" [latitude]="lat" [longitude]="lng">
            <agm-direction [origin]="origin" [destination]="destination" [renderOptions]="renderOptions" [markerOptions]="markerOptions">
            </agm-direction>
        </agm-map>
        <!-- <div class="overlay">

        </div> -->
    </div>
    <div class="rider_footer" *ngIf="order">
        <div class="rider_image "></div>
        <div class="rider_detail ">
            <h5>{{order.riderName}}</h5>
            <p>Rider</p>
        </div>
        <div class="rider_time ">
            {{order.time}}<span>Mins</span>
        </div>
        <div class="rider_call ">Call Rider</div>
        <div class="clear "></div>
    </div>
</ion-content>