angular js maps call: url failed to load webpage the url can't be shown

Question

I'm trying to make a maps call from my ionic framework app. In my html file I use:

<a ng-href="maps://?q={{dest.Latitude}},{{dest.Longitude}}">Maps</a>
<div>{{dest.Latitude}},{{dest.Longitude}}</div>

In my controller the data for dest looks like this:

{"Latitude":12.34567, "Longitude":1.23456}

The latitude and longitude are shown in the div correctly.

But I get an error if I click on the link:

Failed to load webpage with error: The URL can't be shown

I also tried to cast the lat and long to string but it had no effect on it.

If I use static geocordinates like this everything works fine:

<a ng-href="maps://?q=12.34567,1.23456">Maps</a>

What am I missing?

see this stackoverflow.com/a/10769676/1178052 answer

jad-panda
– jad-panda

2015-05-15 10:47:47 +00:00
Commented May 15, 2015 at 10:47 — jad-panda
– jad-panda, Commented May 15, 2015 at 10:47

jad-panda · Accepted Answer · 2015-05-15 10:58:38Z

1

You have to add map in to href Sanitization white list.

example code:

angular.module('app',[])
.config(
    function( $compileProvider ){   
        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension|map|geo|skype):/);
    }
);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
    <a ng-href="map:lat=51.527141,lon=-0.087853">Map</a>
    <a ng-href="skype:username">Skype</a>
</div>

CompileProvider Docs

answered May 15, 2015 at 10:58

jad-panda

2,54717 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kingalione Over a year ago

If I use the $compileProvider sanitization I cant even go to the details view. It also gives me a error "Failed to load webpage with error: The URL can't be shown" if I try to got the the details view.

jad-panda Over a year ago

I tested it in iPhone emulator and its working fine. can you tell little bit more about where and how its failing ?

Kingalione · Accepted Answer · 2015-05-15 12:16:20Z

1

Well the compileProvider solution didn't worked for me so I made a workaround.

In my controller I use:

$scope.navigate = function(){
    var geoString = 'maps://?q='+dest.Latitude+','+dest.Longitude+'';
    window.open(geoString, '_system');
  };

And I'm calling the function like here:

<button ng-click="navigate()" class="button button-icon ion-earth"></button>

This works. I think there is a problem with data binding in the href.

answered May 15, 2015 at 12:16

Kingalione

4,2956 gold badges52 silver badges89 bronze badges

Comments

Hugo Marabutt Nogueira · Accepted Answer · 2015-05-15 10:51:43Z

0

Just to be sure, are testing it on a iOS device? If I'm not mistaken the maps:// protocol only works on iOS with Apple Maps.

answered May 15, 2015 at 10:51

Hugo Marabutt Nogueira

779 bronze badges

5 Comments

Kingalione Over a year ago

Yes its a ios device.

Kingalione Over a year ago

I edited my post. If I use the link in static way it works but not with databindings.

Kingalione Over a year ago

if I replace it like you suggested it opens google maps and not the native maps app. But I want to open the native maps app.

Hugo Marabutt Nogueira Over a year ago

Strange, on my iPhone it opened the native app. A better solution would be jad-panda's. You sanitize the map URI so ng-href should work.

Kingalione Over a year ago

Well I just can't understand why it working with static coordinates and not with the databinding.

Collectives™ on Stack Overflow

angular js maps call: url failed to load webpage the url can't be shown

3 Answers 3

2 Comments

Comments

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

5 Comments

Linked

Related