Phonegap - Open Navigation Directions in Apple Maps App - javascript

I have two variables - Destination and Source - and, using Phonegap, I'm trying to use jQuery to open the external iPhone Apple Maps app with directions.
The code I'm using looks like this:
var url = 'http://maps.apple.com/?q=daddr='+destination+'&saddr='+source;
window.location = url;
Whenever I click the relevant button however, it opens a new view in-app with Google directions as a webview, and I cannot return to the original app.
How can link be opened instead with the iOS default map application?

Changing http://maps.apple.com/?q= to just maps: did the trick.
NB: make sure you write maps: and not map: as, while the latter will run the correct app, it will crash immediately after opening (thanks jprofitt)

Today I was able to open the native Apple Maps app with marker from a Cordova app using BOTH of the follow URL schemes:
maps://maps.apple.com/?q={latitude},{longitude}
AND
maps://?q={latitude},{longitude}
In a link:
<a href="maps://maps.apple.com?q={latitude},{longitude}">
<!-- OR -->
<a href="maps://?q={latitude},{longitude}">
From JavaScript:
window.location.href = "maps://maps.apple.com/?q="+lat+","+lng;
// OR
window.location.href = "maps://?q="+lat+","+lng;
The app is running on an iOS device, iOS version 8.1.2, and cordova-ios is version 3.7.0.

In my case, changing from http://maps.apple.com/?q= to only maps:?q= not solving the problem.
The working scheme that open native Apple Maps with marker is as follows:
maps://maps.apple.com/?q={latitude},{longitude}
full working code:
window.location.href = "maps://maps.apple.com/?q="+lat+","+lng;
Tested working with iOS7.1 simulator, might not works in later version. I don't have the opportunity to test. Sorry.
Supported Apple Maps parameters can be found here:
https://developer.apple.com/library/ios/featuredarticles/iPhoneURLScheme_Reference/MapLinks/MapLinks.html
Credit goes to this SO link: Here

The code
I managed to get this working in 2018 on iOS 11.2 using the following format in iOS:
<a onclick="window.open('maps://?q=51.178847,-1.826160', '_system');">Open in Maps</a>
And this format on Android:
<a onclick="window.open('geo:0,0?q=51.178847,-1.826160', '_system');">Open in Maps</a>
Config permissions
Additionally, don't forget to add permissions to your config.xml file like so:
<allow-intent href="maps:*" />
In my project the geo: intention had existed from the beginning so it took my a while to figure out why this was working on Android and not iOS.

Related

Google maps v3.19 won't load using embedded VB6 browser

We have a legacy VB6 application which until 17/2/2014 was loading and displaying maps using the Google maps V3 API perfectly. This was achieved by creating an html file and loading it using the VB6 browser ocx control. Now the maps won't load and the following error appears.
"Error: Could not get the display property. Invalid argument."
Opening the generated htm file using Explorer or Chrome works without any problems.
Ran into the same problem today with a c# app which has the windows forms webbrowser control
Got the maps working by changing the api call from
"https://maps.googleapis.com/maps/api/js?v=3.exp"
to
"https://maps.googleapis.com/maps/api/js?v=3.19">
Change your reference to the API to be:
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
and it will fix it because this is a default reference to the release version (which is 3.19) that works.
3.20 - The experimental does not work.
after more research: According to this link : https://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Changelog, all calls to 3.17 will serve 3.18. excerpt below:
3.20 17 February 2015
The current JavaScript Maps API v3 experimental version (3.19) will become the release version.
Version 3.17 will be removed. Requests for 3.17 or any prior version will now be served version 3.18.
Versioning documentation is available at: https://developers.google.com/maps/documentation/javascript/basics#Versioning
Available versions after rollover:
Experimental: 3.20
Release: 3.19
Frozen: 3.18
Adding
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" >
directly under the head tag in the web page the browser is displaying worked for me if you still have access to that.
We had this same an issue with powerbuilder with embedded browser ..
Here's how to fix .. use regedit goto key as visible on bottom of image, you will see key. create a reg_dword and name it to you application (ours is tpdesp.exe) The data of 8000 says to use IE8 (which almost all of our customers have). You can set this to 9000 or 10000, use google to get explanations of this.
notes : The app we had the issues with is a 32 bit app running on windows7 64. If that's not what you have search the registry for feature_browser_emulation and fix it there.
[HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION]
It's working (Windows Forms C# in WebControl)
Only adding: v=3.19
public static string llamadaMapas = "<script type=\"text/javascript\" src=\"https://maps.google.com/maps/api/js?**v=3.19**&sensor=false\"></script>";
This fixed a similar problem with GeoSetter. (Map not working.) I had to search in the registry for the feature_browser_emulation key area to be added to, but Geosetter now works. (Just added the key and restarted the program.)
Thank you.

xdk button doesn't do anything

I'm testing my app on a Galaxy Tab 2.
I have a button which looks like this in the code:
<button class='msdsBtn' onclick='launchGoogle();'>msds</button>
// test function
function launchGoogle(){
alertw("launch google");
intel.xdk.device.launchExternal("http://www.google.com");
}
// wrapper for xdk alert
function alertw(str){
intel.xdk.notification.alert(str);
}
the button doesn't do anything. No errors, no opening of Google, no alert box... nothing.
These buttons are dynamically created on the page.
Am I missing something? I should note that it all works in the emulator.
Do you have the proper plugin ("Notification", I believe, in this case) checked in your project settings?
I wouldn't spend too much time figuring out how to make this call work, as Intel is deprecating the XDK APIs that are redundant with Cordova APIs.
Instead, try switching out your notification calls with the equivelent Cordova method. It should look something like this:
navigator.notification.alert(message, alertCallback, [title], [buttonName])
And again, make sure you have the right plugin configured in your project settings ("Dialogs"). Your project settings can be accessed through the XDK IDE by clicking "Projects" in the upper left corner.
Here is the full documentation for the Cordova dialogs API:
https://github.com/apache/cordova-plugin-dialogs/blob/master/doc/index.md
EDIT: And as Ian says above, you can of course debug your app as it runs on a device through the Debug tab for Android, and with WEINRE on other platforms.

Deeplinking mobile browsers to native app - Issues with Chrome when app isn't installed

I have a webpage, lets call it entry.html.
When a user enters this page, a javascript code (see below) is attempting to deep-link the user to the native iOS / Android app.
If the deep-link fails (probably if the app isn't installed on device), user should "fall back" to another page- lets call it fallback.html.
here is the javascript code that is running on entry.html:
$(function(){
window.location = 'myapp://';
setTimeout(function(){
window.location = 'fallback.html';
}, 500);
});
this is a standard deep-linking method that is recommended all over the network; try to deep-link, and if the timeout fires it means that deep-link didn't occur- so fallback.
this works fine, as long app is installed on device.
but if the app isn't installed, this is the behaviour when trying to deep-link:
Mobile Safari: I see an alert message saying "Safari cannot open this page..." for a moment, and then it falls-back properly to fallback.html- which is the expected behaviour.
Mobile Chrome is my problem.
when the app isn't installed, browser is actually redirected to the myapp:// url, which is of course, invalid- so i get a "not found" page, and fall-back doesn't occur.
Finally- my question is:
How can I fix my code so FALL-BACK WILL OCCUR on mobile Chrome as well? just like mobile Safari?
note: i see that LinkedIn mobile website does this properly, with Safari & Chrome, with or without the app installed, but i couldn't trace the code responsible for it :(
note2: i tried appending an iframe instead of window.location = url, this works only on Safari, mobile Chrome doesn't deep-link when appending an iFrame even if app is installed.
Thanks all!
UPDATE:
i found a decent solution, and answered my own question. see accepted answer for my solution.
for whoever is interested, i managed to find a decent solution to solve these issues with deeplinking Chrome on Android.
i abandoned the myapp:// approach, i left it functioning only in cases of an iOS device.
for Android devices, i'm now using intents which are conceptually different than the myapp:// protocol.
I'm mainly a web developer, not an Android developer, so it took me some time to understand the concept, but it's quite simple. i'll try to explain and demonstrate MY solution here (note that there are other approaches that could be implemented with intents, but this one worked for me perfectly).
here is the relevant part in the Android app manifest, registering the intent rules (note the android:scheme="http" - we'll talk about it shortly):
<receiver android:name=".DeepLinkReceiver">
<intent-filter >
<data android:scheme="http" android:host="www.myapp.com" />
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.BROWSABLE"/>
<category android:name="android.intent.category.DEFAULT"/>
</intent-filter>
</receiver>
now, after this is declared in the app manifest, i'm sending myself an email with "http://www.myapp.com" in the message.
when link is tapped with the Android device, a "chooser" dialog comes up, asking with which application i want to open the following? [chrome, myapp]
the reason this dialog came up upon tapping on a "regular" url, is because we registered the intent with the http scheme.
with this approach, the deeplink isn't even handled in the webpage, it's handled by the device itself, when tapping a matching link to an existing intent rule defined in the Android app manifest.
and yes, as i said, this approach is different by concept than the iOS approach, which invokes the deeplink from within the webpage, but it solves the problem, and it does the magic.
Note: when app isn't installed, no chooser dialog will come up, you'll just get navigated to the actual web page with the given address (unless you have more than 1 browser, so you'll need to choose one... but lets not be petty).
i really hope that this could help someone who's facing the same thing.. wish i had such an explanation ;-)
cheers.
It is very important to make sure that when you try to open a deeplink URL with JavaScript that the URL is properly formatted for the device and browser. (If you do not use the appropriate deeplink URL for the browser/platform, a user may be redirected to a “Page Not Found”, which is what you experience.)
Now you must note that Chrome on Android has a different URL format than the old standard Android browser 1! You need to annotate the deep links using href="android-app://" in the HTML markup of your web pages. You can do this in the section for each web page by adding a tag and specifying the deep link as an alternate URI.
For example, the following HTML snippet shows how you might specify the corresponding deep link in a web page that has the URL example://gizmos.
<html>
<head>
<link rel="alternate"
href="android-app://com.example.android/example/gizmos" />
...
</head>
<body> ... </body>
For more details, see the references here:
https://developer.chrome.com/multidevice/android/intents
https://developers.google.com/app-indexing/webmasters/server
https://developer.android.com/training/app-indexing/enabling-app-indexing.html#webpages
And here's a deep link testing tool for Android: https://developers.google.com/app-indexing/webmasters/test.html
Hope that helps.
1 Since the old AOSP browser was replaced by chromium, this is now the default way to handle deep links for recent Android versions. Nonetheless, Android still requires a conditional soltion, because older OS versions still use the AOSP browser.
I have created a Javascript plugin, which supports most of the modern browsers on mobile. But it requires to have deep linking landing pages to be hosted on cross domain(different than universal link url) to work on ios9 Facebook using universal linking. There is also different way to get that working on the Facebook iOS9 using Facebook SDK. I am sharing this if anyone might find this helpful. Currently it does not fallback option, but if falls back to the App Store.
https://github.com/prabeengiri/DeepLinkingToNativeApp
I am Using this Code to for deeplinking.
If the app is installed the app will open up..
If the app is not installed then this remains as it is..
If you wish to add any other condition for app no install then just uncomment the setTimeout code .
<script>
var deeplinking_url = scootsy://vendor/1;
$(document).ready(function(){
call_me_new(deeplinking_url);
});
var call_me_new = function(deeplinking_url){
if(deeplinking_url!=''){
var fallbackUrl ='http://scootsy.com/';
var iframe = document.createElement("iframe");
var nativeSchemaUrl = deeplinking_url;
console.log(nativeSchemaUrl);
iframe.id = "app_call_frame";
iframe.style.border = "none";
iframe.style.width = "1px";
iframe.style.height = "1px";
iframe.onload = function () {
document.location = nativeSchemaUrl;
};
iframe.src = nativeSchemaUrl; //iOS app schema url
window.onload = function(){
document.body.appendChild(iframe);
}
//IF the App is not install then it will remain on the same page.If you wish to send the use to other page then uncomment the below code and send a time interval for the redirect.
/*
setTimeout(function(){
console.log('Iframe Removed...');
document.getElementById("app_call_frame").remove();
window.location = fallbackUrl; //fallback url
},5000);*/
}
};
</script>
setTimeout(function () { if (document.hasFocus()) { window.location = 'URL WILL BEHERE';} }, 2000);
window.location = 'app://';
Need to check document.hasFocus() here because if app is open then playstore url is also open in browser
I also had similar issue, there is a possible alternative for this. If the app is not installed on user's device we can redirect that to some other url.To know more about it Check Here
Example:
Take a QR code
In my case its working fine in opera and chrome browser my deeplink url is
"intent://contentUrl + #Intent;scheme=" +envHost +;package="+envHost+";end";
For other browser create iframe and append the url.
Note -: iframe url append having issue with old device and in firefox its opening app dialog .

Unable to open appstore link (PhoneGap)

Tried both of the following methods so that ppl can click a link in my app and be taken to the app store to review/rate:
Rate our App
and when this linked is tapped on, nothing happens and i get the following console message:
Failed to load webpage with error: The URL can’t be shown
Also tried a window.open:
$(document).hammer().on('tap', self.frameSelector + ' .rate-us-action', function(){
window.open('itms-apps://itunes.apple.com/app/id111111111');
});
and when tapping attempting this method nothing happens and i get the following console message:
handle url: itms-apps://itunes.apple.com/app/id1111111
How do i get my phonegap app to properly open a link to the appstore???
Try this format for <> has to be replaced with the appropriate info:
http://itunes.apple.com/app/<APP_NAME>/id<APP_ID>?mt=8
I've used the following link format for Cordova/PhoneGap apps since Cordova 2.2 & iOS 5:
itms-apps://itunes.com/apps/appname
Simply replace appname with your app's name.
Rate our App
You can also open the App Store and display a page of apps by your company with the same format:
itms-apps://itunes.com/apps/companyname
In a link:
More Apps By Us
This works today on iOS 8.1.1 without the Cordova inappbrowser plugin.

phonegap geo uri association

I am developing a phonegap application using phonegap build (therefore ALL in pure js and html, no native languages).
In my page, i have some geo uri links (http://en.wikipedia.org/wiki/Geo_URI ) that are cliccable (they represent coordinates of markers in a map).
Now, if the mobile device has installed and associated with this type of files an app (usually a gps navigator or the like), they open and launch the associated application as they should.
My issue is that I don't want to show the clickable link (the button appears in the infowdindow of the marker) if the device has no app capable to open them.
In native android code, you have the query-intent command for this. Does anyone know how to verify this in pure phonegap js?
Ty!
D.
I have been asked for code: The only code that is relevant here is the following, which computes the html code to embed in the infowindow of the marker:
var computePathString=<a href='geo:"+area['marker']['position'].lat()+",
"+area['marker']['position'].lng()+"'>Route</a>;
Which translates to the following html:
<a href='geo:45.557,9.1523'>Route</a>
Which works great on click IFF the device has an associated app (usually a gps navigator), but else does nothing on click. I need to achieve something similar to the query intents of android:
PackageManager packageManager = getPackageManager();
List<ResolveInfo> activities = packageManager.queryIntentActivities(intent, 0);
boolean isIntentSafe = activities.size() > 0;
only, in native phonegap js.

Categories