CODEWITHSUNDEEP
javascriptandroidiosgoogle-mapscordova
Tim
Tim

Reputation: 98

How to get a back button in google maps in Phonegap/Cordova (iOS & Android)

I have a Phonegap/Cordova project with a google map link. When I go to the google map page/app on Android and iOS, there is no return option to the previous page. So my question is, is it possible to display a back button in google maps to go back to my app/page?

Javascript and HTML:

 function googleNavigate()
{
  window.location.href ='http://maps.google.com/maps?saddr='+ latGeo +', '+ lonGeo +'&daddr='+ latArticle +','+ lonArticle +'';
}
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale = 1.0">

    <!-- Google maps Javascript -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAY-ZgdUCigx5C07JP3J8VVVRFUKUSSs4A"></script>
  </head>
  <body>
    <div class="navigate-button">
      <a href="#" onclick="googleNavigate()" class="button tiny navigate-button">Navigeer</a>
    </div>
  </body>
</html>

I retrieve a latitude and longitude from the geolocator, that's the reason I put the href in javascript.

Thanks!

Upvotes: 1

Views: 1189

Answers (3)

DaveAlden
DaveAlden

Reputation: 30366

If you want to open the native navigation app on iOS/Android (rather than the website), you can use this cordova/phonegap plugin.

On Android, pressing the hardware back button in Google Maps navigation returns your app.

On iOS, you can use the x-callback mechanism with Google Maps for iOS

Upvotes: 1

Tim
Tim

Reputation: 98

I've solved my problem with the childbrowser plugin and it works for Android and iOS.

Javascript:

function googleNavigate()
{
window.plugins.ChildBrowser.showWebPage('https://www.google.com/maps?saddr=' + latGeo + ',' + lonGeo + '&daddr=' + latArticle + ',' + lonArticle + '',
        {showLocationBar: true});
}

And added this to my (xml) config file:

<gap:plugin name="com.phonegap.plugins.childbrowser" version="5.0.0" />

Upvotes: 0

AshBringer
AshBringer

Reputation: 2673

Add a listener for the back button and call the function that will get you in the previous HTML page with the callback function : 

document.addEventListener("backbutton", onBackKeyDown, false);

function onBackKeyDown() {
    // Handle the back button
     window.history.back();
}

Upvotes: 0

Related Questions