Cordova iOS does not open map from geo link

Question

I am developing hybrid app using Cordova & Ionic. At first I develop for Android. My app contains geo: and tel: link. On Android, everything works fine. geo: link will open up Google Map or Waze, and tel: link will open phone call.

However, on iOS the tel: link still work, but the geo: link does not work. When I click on it, nothing happen. When I look at Xcode, it says: Failed to load webpage with error: The URL can’t be shown

How can I fix it?

Answer 1

I've write a method that replace all geo: href on devices that is different of android. In android the geo: tag runs better than open google maps directly because its fire an option to open Waze, Uber, Google Maps and other maps applications.

With cordova device plugin run:

if(device.platform.toLowerCase != 'android'){
    $('a').each(function(i,el){
        if($(el).attr('href').indexOf("geo:") == 0){
            $(el).attr(
                'href',
                $(el).attr('href').replace(
                    'geo:',
                    'http://maps.google.com/maps?q='
                )
            );
        }
    });
}

Answer 2

On iOS you need to use "maps:"

On Android you can use "geo:" or "http://maps.google.com/maps"

In both cases, you'll probably need the inappbrowser pluing

var url = "http://maps.google.com/maps"; 
if (device.platform.toLowerCase() == "ios") {   
  url = "maps:" 
} 
url + "?q=1.5149818510303,110.35436153412"; 

Then add the map link with target="_system", this signals to the inappbrowser plugin to open it externally.

<a href="{{ url }}" target="_system">map link</a>