Get distance between two location or two latitude and longitude in angular

//  Component file

import { Component } from '@angular/core';

import {HttpClient} from '@angular/common/http';

@Component({

selector: 'app-school-dashboard',

templateUrl: './school.component.html',

styleUrls: ['./school.component.css'],

})

export class SchoolComponent {

debugger;

msg = 'welcome School';

mapdistance: any;

byroaddistance: any;

byroadtime: any;

withoutroaddistance: any;

location: any;

fromaddress: any;

toaddress: any;

_lat1= 15.2993265; // Goa

_lon1= 74.12399599999999;

_lat2= 28.5355161; // Delhi

_lon2= 77.3910265;

constructor( private http: HttpClient) {

this._getDistanceFromLatLonInKm();

}

_getDistanceFromLatLonInKm() {

const lat1 = this._lat1;

const lon1 = this._lon1;

const lat2 = this._lat2;

const lon2 = this._lon2;

/*This is count by Radius of the earth*/

const R = 6371; // Radius of the earth in kilometers

const dLat = this.deg2rad(lat2 - lat1); // deg2rad below

const dLon = this.deg2rad(lon2 - lon1);

const a =

Math.sin(dLat / 2) * Math.sin(dLat / 2) +

Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) *

Math.sin(dLon / 2) * Math.sin(dLon / 2);

const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

const d = R * c; // Distance in KM

this.withoutroaddistance = d;

const googlekey = 'googleapikey';

const origins = lat1 + ',' + lon1;

const destinations = lat2 + ',' + lon2;

/*End here*/

/*This is count by road map of the earth*/

this.http.get('https://maps.googleapis.com/maps/api/distancematrix/json?origins='

+ origins + '&destinations=' + destinations + '&key=' + googlekey + '').

subscribe(res => {

this.mapdistance = res;

this.byroaddistance = this.mapdistance.rows[0].elements[0].distance.text;

this.byroadtime = this.mapdistance.rows[0].elements[0].duration.text;

});

/*End here*/

}

deg2rad(deg) {

return deg * (Math.PI / 180);

}

getlatlng(address, type) {

 this.http.get('https://maps.googleapis.com/maps/api/geocode/json?address=' +

address).subscribe(res => {

this.location = res;

const addres = this.location.results[0].formatted_address;

const lat = this.location.results[0].geometry.location.lat;

const lng = this.location.results[0].geometry.location.lng;

this.setlocationOnMap(addres, lat, lng, type);

}, err => {

console.log(err);

});

}

setlocationOnMap(address, lat , lng, type) {

if (type === 'frm') {

this.fromaddress = address;

this._lat1 = lat;

this._lon1 = lng;

} else {

this.toaddress = address;

this._lat2 = lat;

this._lon2 = lng;

}

}

}

HTML File

<h1>This is your wellcome screen !!</h1>

<div>

<div class="example-container">

<input #fromadd placeholder="Enter your current location"

(blur)="getlatlng(fromadd.value, 'frm')" autofocus>

<input matInput #toadd placeholder="Enter your drop location" 

(blur)="getlatlng(toadd.value, 'to')">

</div>

</div>

<div>

<br>

<div *ngIf="_lat1" style="float: left;" >

[ From location: {{fromaddress}}

let: {{_lat1}},

lng: {{_lon1}} ]

</div>

<div *ngIf="_lat2">

[ To location: {{toaddress}}

let: {{_lat2}},

lng: {{_lon2}} ]

</div> <br>

<button class="mbutton" *ngIf="_lat1 && _lat2"

(click)="_getDistanceFromLatLonInKm()"

 mat-raised-button color="primary">GetDistance</button>

{{byroaddistance}} , {{byroadtime}} , {{withoutroaddistance}}

<div *ngIf="_lat1 && _lat2">

<agm-map [latitude]="_lat1" [longitude]="_lon1" [scrollwheel]="true" [zoom]="4">

<agm-marker [latitude]="_lat1" [longitude]="_lon1" [label]="fromaddress">

</agm-marker>

<agm-marker [latitude]="_lat2" [longitude]="_lon2" [label]="toaddress">

</agm-marker>

</agm-map>

</div>

<br>

</div>

HTML of an AGM-map in angular please follow this link.
http://gauravlambha.blogspot.in/2017/09/google-map-in-angular-js-2.html


This is looking like this