javascriptandroidcordovageoangular-google-maps

Open inbuilt android google map directly with navigation using start and end address when user clicks on link withing agm


My question is similar to How to open a mobile device's map app when a user clicks on a link?.

I have a single app developed using angular 8 which runs on desktop browser, mobile browser and inside an andriod app which uses Cordova(using Android browser) based on chromium, to show the web view (the iframe).

I have used angular google map inside my angular app and I am trying to achieve something like, if user is opening my app inside a mobile browser or an andriod app(which uses cordova web view), I need to open the native/inbuilt google map for navigation for the specified source and destination when clicked on the link. And in desktop, I am opening the google map web view.

Here is my code below:

navigate(startAddress,destAddress){
    if (navigator.userAgent.match(/(Android|BlackBerry|IEMobile)/) && !this.inIframe()) {
      window.open(`geo:${this.latitude},${this.longitude}?q=${startAddress},${destAddress}`);
     }else if ((navigator.platform.indexOf("iPhone") != -1)) {
      window.open(`http://maps.apple.com/?q="${destAddress}`, '_system')
     }else {
     window.open(`https://www.google.com/maps/dir/?api=1&travelmode=driving&layer=traffic&origin=${startAddress}&destination=${destAddress}`);
    }
}

 inIframe() {
    try {
      return window.self !== window.top;
    } catch (e) {
      return true;
    }
  }

But I have a problem here, when I determine my app is opened in a mobile(first if statement), I am using geo:${this.latitude},${this.longitude}?q=${startAddress},${destAddress} to open the inbuilt google map navigation. The inbuilt google map gets opened but it is not showing the navigation directly with the given source and destination.

I am not sure how to use the origin and destination address geo:properly with src and dest addresses.

I have seen Android - launch google map via web url which helped me to open the inbuilt google map directly but using my approach with start and end address, the app gets freezed and does not directly show the navigation also. Could you please verify my approach and let me know where I am going wrong?


Solution

  • On an Android device:

    https://www.google.com/maps/dir/?api=1&origin=Google+Pyrmont+NSW&destination=QVB&destination_place_id=ChIJISz8NjyuEmsRFTQ9Iw7Ear8&travelmode=walking

    above is the normal request that seems fine in you code tooso you could use the link implementation for android too.

    apart from that you might wanna look into url encoding and construction bars :https://developers.google.com/maps/documentation/urls/url-encoding