Cordova Phonegap and Google Maps v3 javascript api: How to add backbutton functionality when clicking either the license link or the Google maps logo

Question

Background: The Cordova phonegap 2.2 application running on Android allows listening to the backbutton event

document.addEventListener(\"bac         


        

Answer 1

Here is one way to intersect the google maps links.

Assuming you have jquery available, you can include this method in your script:

function directUrlToExternalBrowser(urlPattern) {
  var pattern = "a[href^='"+urlPattern+"']";//all urls startting with urlPattern
  $(pattern).live('click', function(e){
      e.preventDefault();
      navigator.app.loadUrl($(pattern).attr("href"), {openExternal: true});
  });
}

Then you can direct the clicks to the phonegap api by the following lines:

directUrlToExternalBrowser("http://maps.google.com/maps");
directUrlToExternalBrowser("http://www.google.com/intl");

Answer 2

$(document).on('click', '#map a[target="_blank"]', function(e){
    e.preventDefault();
    var url = $(this).attr('href');

    if( /Android/.test(navigator.appVersion) ){
        navigator.app.loadUrl(url, { openExternal:true });
    }else{
        window.open(url, '_system');
    }
});

#map - google maps container

Work both for android and ios.

Answer 3

.live() has been removed in jQuery v1.9 and is deprecated in Zepto v1.0rc1, so here's a revised version of kvaale's answer that should work well with the latest frameworks.

This version also uses PhoneGap/Cordova's InAppBrowser code, enabling you to either open the links in the InAppBrowser (using '_blank') or the system web browser (using '_system').

function directUrlToExternalBrowser(urlPattern){
    var pattern = "a[href^='"+urlPattern+"']";      // detect all urls starting with urlPattern

    $(document).on('click', pattern, function(e){
        e.preventDefault();
        var ref = window.open($(pattern).attr("href"), '_system', '');      // '_system' will open the system web browser, '_blank' will open the InAppBrowser
    });
}

Then put the following code in your $(document).ready() function...

directUrlToExternalBrowser("http://maps.google.com/maps");
directUrlToExternalBrowser("http://www.google.com/intl");

If you want to detect all "a href" links (not just those for Google Maps), use the following code instead...

directUrlToExternalBrowser("http://");  
directUrlToExternalBrowser("https://");