Search code examples
androidgoogle-mapsandroid-intentcross-platformgoogle-directions-api

Google maps cross-platform URL fails to load route on Android after "in app navigation"

I have an Angular 9 + Ionic 5 application, deployed as PWA, Android and IOS apps.
We use google's universal, cross-platform URL to launch Google Maps, as described here: https://developers.google.com/maps/documentation/urls/get-started

Function open a location in google maps:

export const openMaps = (lat: number, lng: number) => {
  const url = `https://www.google.com/maps/search/?api=1&query=${lat}%2C${lng}`;
  return window.open(url, '_top').focus();
};

This works fine in PWA and IOS app, however in Android after the address is loaded in browser as expected, it fails to launch Navigation after supporting start location in Route planner and tapping on "IN APP NAVIGATION". (Same happens if i provide the link with Directions to start navigation automaticly).

Error shown after tapping "IN APP NAVIGATION":
The webpage at intent://maps.app.goo.gl/?link=https://www.google.com/maps/dir//50.253722,10.958954/@49.9145812,10.9626145,8z/data%3D!4m2!4m1!3e0!11m1!6b1?entry%3Dml&apn=com.google.android.apps.maps&amv=914018424&isi=585027354&ibi=com.google.Maps&ius=comgooglemapsurl&utm_campaign=ml_promo&ct=ml-nav-nopromo-dr-nlu-wv-msc&mt=8&pt=9008&efr=1#Intent;package=com.google.android.gms;scheme=https;S.browser_fallback_url=https://play.google.com/store/apps/details%3Fid%3Dcom.google.android.apps.maps&pcampaignid%3Dfdl_long&url%3Dhttps://www.google.com/maps/dir//50.253722,10.958954/@49.9145812,10.9626145,8z/data%253D!4m2!4m1!3e0!11m1!6b1%3Fentry%253Dml&min_version%3D914018424;end; could not be loaded because:

net::ERR_UNKNOWN_URL_SCHEME

Does someone have an idea what went wrong here? The URL syntax should be correct, but seems like the google maps intent loads an unknown scheme on Android.

Solution

  • Solved! Problem was window.open(url, '_top').focus();

    These link should be used with target: _system.

    And in case of hybrid Ionic app, the following plugin is also recommended! https://ionicframework.com/docs/native/in-app-browser