Angular 6 How to Get Distance between two location AGM

Question

I get Direction between two points using this reference https://www.npmjs.com/package/agm-direction Now I want to get/calculate distance between two location and I'm Confusing how's do it.

In my Module

AgmCoreModule.forRoot({
  apiKey: 'My API Key....',
  libraries: ['geometry']
})

In my Component

getDirection() {
   this.origin = { lat: this.pick_latitude, lng: this.pick_longitude }
   this.destination = { lat: this.drop_latitude, lng: this.drop_longitude }
}

My Question : How I get distance between two point when I use above reference to get direction path ? Please give me suggestion ( Google map API etc). I'm using Angular 6

Its already answered here https://stackoverflow.com/a/27943/7651583 — Ravikumar Rajendran, Oct 18 '18 at 10:00
@Ravikumar Thank You help me, Isn't has any Google Map API to get distance ? — Rika, Oct 18 '18 at 10:07
@Ravikumar that's the the proper way to do it using angular google maps. They have a library for that. — Patricio Vargas, Oct 18 '18 at 13:55
@Ravikumar I meant that not the proper way. You can take a look to geometry on google maps or take a look to my answer — Patricio Vargas, Oct 18 '18 at 15:28

score 10 · Accepted Answer · edited Jul 23 '20 at 11:04

10

You need to use Google Geometry API

https://developers.google.com/maps/documentation/javascript/geometry

import {} from '@types/googlemaps';
import { AgmCoreModule, MapsAPILoader } from "@agm/core";

calculateDistance() {
    const mexicoCity = new google.maps.LatLng(19.432608, -99.133209.);
    const jacksonville = new google.maps.LatLng(40.730610, -73.935242.);
    const distance = google.maps.geometry.spherical.computeDistanceBetween(nyc, london);
  }

for Angular 6+

Type to add allow Angular to use the Google Maps types. In your terminal run:

npm i -D @types/googlemaps

Time to tell Angular we are ready to use the Google Maps Types. Open your tsconfig.app.json and tsconfig.spec.json and add googlemaps to the types array inside of the compilerOptions object.

Note: I only put it on the tsconfig.app.json file some people have encounter issues and have to add it to both files I mentioned above.

   "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["googlemaps"]
   },

or

Note on @Abdelsalam Shahlol comment:

For Angular 6+, you can't do this import {} from '@types/googlemaps'; Instead place this in top (first line) of the TS file. /// /node_modules/@types/googlemaps/index.d.ts"/>

In your app.module.ts

AgmCoreModule.forRoot({
  apiKey: 'YOUR API KEY',
  libraries: ['geometry']
}),

edited Jul 23 '20 at 11:04

Christian Vincenzo Traina

9,546
2
40
63

answered Oct 18 '18 at 13:58

Patricio Vargas

5,236
11
49
100

1

After Follow your instruction I got value `9616.47631361913` for ` const distance' If I divide it 1000 I think I can get distance by **km** Am I correct ? – Rika Oct 19 '18 at 04:57
2

@Rika correct. The distance you see it's in meters `9616.47631361913` you can divide by 1000 or multiply by `0.001` – Patricio Vargas Oct 19 '18 at 05:49
Thank You @PatricioVargas Your answer is very helpful for me,If you can Please tell me is there has any method to get **duration** like distance. – Rika Oct 19 '18 at 05:52
by duration you mean how long would it take to get from point a to point b? @Rika – Patricio Vargas Oct 19 '18 at 06:01
Yes, Simply Time – Rika Oct 19 '18 at 06:11
well..by car, walking or flying? – Patricio Vargas Oct 19 '18 at 06:13
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/182128/discussion-between-rika-and-patricio-vargas). – Rika Oct 19 '18 at 06:13
why is MapsAPILoader being required? where is it used? Im dealing with the same question. – Tomas Katz Jan 03 '19 at 14:07
2

For Angular 6+, you can't do this `import {} from '@types/googlemaps';` Instead place this in top (first line) of the TS file. `/// ` – Abdelsalam Shahlol Feb 20 '19 at 09:30

score 3 · Answer 2 · answered Jul 10 '19 at 15:37

You can do a straight line distance with maths, you don't need to use the Google API and use up any "credit" doing it.

Here's a lat/long to lat/long function I wrote for use in Angular 6+:

  asTheCrowFlies(x1: number, y1: number, x2: number, y2: number) {
var result = 0;
const RADIANS: number = 180 / 3.14159265;
const METRES_IN_MILE: number = 1609.34;

if (x1 == x2 && y1 == y2) {
  result = 0;

} else {
  // Calculating Distance between Points
  var lt1 = x1 / RADIANS;
  var lg1 = y1 / RADIANS;
  var lt2 = x2 / RADIANS;
  var lg2 = y2 / RADIANS;

  // radius of earth in miles (3,958.8) * metres in a mile * position on surface of sphere...
  result = (3958.8 * METRES_IN_MILE) * Math.acos(Math.sin(lt1) * Math.sin(lt2) + Math.cos(lt1) * Math.cos(lt2) * Math.cos(lg2 - lg1));
}
return result; }

If you take out the "miles to metres" multiple, the answer is in miles. You only need the Google API for ROAD distances and that's not done with the MAP API which AGM uses, instead you need the ROUTE API from Google. I have not yet seen an Angular component for the ROUTE API; most people just write a service with the API calls.

Angular 6 How to Get Distance between two location AGM

2 Answers2

Linked