CODEWITHSUNDEEP
androidhtmlgoogle-mapscordova
Doff3n
Doff3n

Reputation: 664

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

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

document.addEventListener("backbutton", function(e){ history.back();}

The google maps api V3 creates the map with the Google logo linking to a Google maps webpage in the left lower corner and a clickable license link in the right lower corner. The logo or the terms of service links have no specific id/selector.

Problem When clicking one of the links the webpage is redirected to a Google webpage with: target:_blank, the website then opens in the same window as the Cordava application, but the back button functionality is lost because the webpage contains its own Javascript.

Is it possible to inject some code upon loading a webpage?

One solution could possibly be to open the links externally with:

navigator.app.loadUrl([href here], { openExternal:true } );

but then again there is still the problem of lack of selectors.

Update: When clicking the button while on the license page or in Google maps I get the following error message in logcat: 11-13 16:20:30.500: E/Web Console(31508): Uncaught ReferenceError: cordova is not defined:1

Upvotes: 5

Views: 3061

Answers (3)

xdebug
xdebug

Reputation: 21

$(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.

Upvotes: 1

wicketyjarjar
wicketyjarjar

Reputation: 1815

.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://");

Upvotes: 2

kvaale
kvaale

Reputation: 644

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");

Upvotes: 0

Related Questions