Open an external link to map

#1

I want to very simply open a link in the device browser or maps app:

config.xml

<allow-intent href="http://*/*" launch-external="yes"/>
<allow-intent href="https://*/*" launch-external="yes"/>

html

<a id="my-link" href="" class="link external">Get Directions</a>

I build the directions link dynamically and set like this:

$$('#my-link').attr('href', 'https://www.google.com/maps/dir/?api=1&origin='+originlatlng+'&destination='+ destinationlatlng);

This works when testing in desktop browser through phonegap app but not on device…
What am I doing wrong!?

#2

I figured this out …

cordova plugin add cordova-plugin-inappbrowser

intercept clicks for external links and use cordova.InAppBrowser.open :

$$(document).on('deviceready', function() {
  window.open = cordova.InAppBrowser.open;
  $$(document).on('click', function (e) {
    var $t = $$(e.target);
    if ( $t.is('a') && $t.hasClass('external') ) {
      e.preventDefault();
      window.open($t.attr('href'), '_system');
    }
  });
});

Use standard html markup like this :

<a href="{{mpaurl}}" class="link external">Get Directions</a>

( This also works for mailto: and tel: links )

#3

I’m experiencing a strange thing… Using the click intercepting method I posted above, I’m now trying to just open a site link in the device native browser. For some reason I can only get this to work if the link tag does not contain anything other than text. Any ideas @nolimits4web ?

<li>
  <!-- This works -->
  <a href="{{url}}" class="link external">External Link</a>
  <!-- This does not work -->
  <a href="{{url}}" class="item-link item-content external">
    <div class="item-media"><img src="{{icon}}" width="44px"></div>
    <div class="item-inner">
      <div class="item-title-row">
        <div class="item-title">{{name}}</div>
      </div>
      <div class="item-subtitle">{{urldisplay}}</div>
    </div>
  </a>
</li>

The problem seems to be that a click event is not fired on an <a> tag if if wraps around another element. How can I combat this?

#4

There is no any difference in both of this links, i mean there is no something specific about it. Actually F7 has built-in handler for external links with InAppBrowser. Try to remove your code you use to handle such links and just add target="_system" to your external links

#5

I can’t believe I spent the best past of the day hacking at this. The problem with using the $$(document).on('click', function (e) {} method I had to intercept the clicks is that e.target was the immediate element under the click and not always the link element with the href.

I saw that F7 had some built in external link handling but I couldn’t get this to work. So target="_system" was what I needed… I could have saved so much time! Thank you, I’ll know for next time.

#6

Yes, global events are tricky, in this case you may use second argument to pass context:

$$(document).on('click', 'a.external', function (e) {
  // e.target still can be some element that is inside of a link
  // but "this" here always refer to a.external
  var url = $(this).attr('href');
});

That is for future cases

#7

I’ve had a similar problem. I use arrow functions which override “this”. In jquery I could use event.currentTarget. Is that something that could be added to Dom7? :smiley:

#8

It won’t be added to Dom7 as it will bring just extra complexity to the library code. Solution is simple, just don’t use arrow functions when you need “this” :wink: