CODEWITHSUNDEEP
angulargoogle-maps
Nancy
Nancy

Reputation: 1011

Angular google map direction - how to bind origin and destination

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');

  }

Upvotes: 0

Views: 1741

Answers (2)

sambit
sambit

Reputation: 133

 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

Upvotes: 2

Vishal Rajole
Vishal Rajole

Reputation: 1544

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

Upvotes: 0

Related Questions