Angular google map direction - how to bind origin and destination

Question

I am using the below code to bind origin and destination - latitude and longitude. After getting the origin( current location ) and destination ( i am getting the values from marker click ) i am passing the parameters to url and trying to open the new tab. The issue is the parameters are not getting passed to the google map url.

getDirection(dirLat: any, dirLng: any) {
    let srcLat, srcLng;
    if ('geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition((position) => {
      srcLat = position.coords.latitude;
      srcLng = position.coords.longitude;
      });
    }
    this.dir = {
      origin: { latitude: 29.9809683, longitude: 31.3377553 },
      destination: { latitude: dirLat, longitude: dirLng }
    };


   // prints the values correctly for origin and destination{latitude: 29.9809683, longitude: 31.3377553}

    console.log('originDest', this.dir.origin, this.dir.destination);
    //in the below url, dir.origin and dir.destination does not get the values
    window.open('https://www.google.com/maps/dir/?api=1&origin={{dir.origin}}&destination={{dir.destination}}&travelmode=driving', '_blank');

  }

score 2 · Accepted Answer · answered Oct 16 '18 at 16:21

2

 var p ='origin';
     var d = 'destination';
     window.open('https://www.google.com/maps/dir/?api=1&origin='+p+'&destination='+d+'&travelmode=driving','_blank' );

you can bind origin and destination in this way

answered Oct 16 '18 at 16:21

sambit

123
12

Vishal Rajole · Answer 2 · 2018-09-17T10:36:05.123

0

getCurrentPosition asynchronously attempt to obtain the current location of the device.

console log shows correct values because of asynchronous nature. Read in depth explanation here Weird behavior with objects & console.log

read more details here about geolocation api here https://w3c.github.io/geolocation-api/#geolocation_interface

edited Sep 17 '18 at 10:36

answered Sep 17 '18 at 10:26

Vishal Rajole

1,504
1
13
19

my issue is not with console.log. it is with the URL - the values of origin and destination are not getting passed to the URL – Nancy Sep 17 '18 at 10:35

Angular google map direction - how to bind origin and destination

2 Answers2