Apple Maps link not opening native app through Chrome for iOS - javascript

I've built a custom Google map that includes a function that either sets a link to open in Apple Maps or Google Maps:
function mapsSelector(lat, long) {
/* If on iOS, open in Apple Maps */
if ((navigator.platform.indexOf('iPhone') != -1) || (navigator.platform.indexOf('iPad') != -1)) {
window.open('http://maps.apple.com/?daddr=' + lat + ',' + long + '&dirflg=w');
/* else, use Google */
} else {
window.open('https://www.google.com/maps/dir/?api=1&destination=' + lat + ',' + long + '&travelmode=bicycling');
}
}
It works on my website when it's run as a web app or in Safari (it opens Apple Maps), but in Chrome for iOS, it briefly opens a new tab, which then immediately closes. If the same URL is opened as a standard href, it works as expected, so I imagine it's something to do with the way the function triggers the link.
To reproduce, you can go to http://nyceboarding.com/map.html, tap on any marker, and then the "Get Directions" link.

They key is iOS users use a different protocol at the beginning. Try changing the "http://" in the iOS block to "maps://" and see if that works.

Change the
www.google.com/maps/...
to
maps.google.com/maps/...

Related

HTML/PHP Block news tabs on Android and iOS browsers

I use this code for codebar scan with cellphone, on Google Chrome works but on Firefox and Samsung Browser after scan barcode an another tab are created, and +1 tab per scan.
My code:
window.top.location.href = "zxing://scan/?ret=" + href + "profile_sps.php?barid={CODE}";
I tried several ways:
window.open("zxing://scan/?ret=http://rodrigovrodrigues.tk/sjb/profile_sps.php?barid={CODE}", "_top");
window.self.location.href = "zxing://scan/?ret=" + href + "profile_sps.php?barid={CODE}";
window.parent.location.href = "zxing://scan/?ret=" + href + "profile_sps.php?barid={CODE}";
And some others...
Any friend can help me with this?
Thanks for all help.

Google bookmarks script only saves about 1 in 5 links

I've been having this problem with the Google bookmarks "bookmarklet" button in Chrome for several years now: it does not reliably save URLs to https://www.google.com/bookmarks so I have to double-check every link I save. The form is invoked by clicking the Google Bookmark button in the Chrome bookmarks bar that is a javascript link that opens the form. The button comes from the bottom of the Google bookmarks page itself:
Google Bookmarks page
Google Bookmark button properties
Many links will not save unless I add a suffix such as #1 to the end of the URL, and even that is not a 100% effective workaround. For example, the URL http://jsbeautifier.org/ only saves if I append the #1 in the URL field: http://jsbeautifier.org/#1.
Google Bookmarks Form
I don't know if it's an issue with the javascript, encoding the URL, or an issue on Google's end they have never fixed. Here is the full javascript that comes directly from the button properties. I added the whitespace for readability:
javascript: (function() {
var a = window,
b = document,
c = encodeURIComponent,
d = a.open("https://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + c(b.location) + "&title=" + c(b.title), "bkmk_popup", "left=" + ((a.screenX || a.screenLeft) + 10) + ",top=" + ((a.screenY || a.screenTop) + 10) + ",height=510px,width=550px,resizable=1,alwaysRaised=1");
a.setTimeout(function() {
d.focus()
}, 300)})();
Thanks in advance! :)
I have similar issue of not able to add a lot of https website into Google Bookmarks, especially those from Github or Google's Chrome Webstore. Sometimes if you change the https prefix to http, it will work, but not for all.
I guess the problem lies at the backend side, because it also fails when you try to add the URL in question directly at the Add bookmark page.
Seems Google deserted this product (originated from the time of Google Toolbar) and favors Google Chrome bookmark sync solution.

Open google maps on href element (IOS and Android)

I want to open google maps by clicking on the element on mobile devices.
<img src='/img/pin.svg'>
Here it's my code. It's working on Android devices, but not on Apple's. So here is my question, how to ask for opening maps on both of those devices?
To open "maps" on an iOS device (or Mac for that matter) you'd use:
http://maps.apple.com/?ll=50.060915,19.948066
I think you'd have to write some javascript to determine platform, and then open one of the two urls.
This would generally look like this:
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
if(isAndroid) {
window.location = 'geo:50.060915,19.948066';
}
else {
window.location = 'http://maps.apple.com/?ll=50.060915,19.948066';
}
Put that in an onclick handler for the a and you're set!

Redirect Safari To Chrome

I'm trying to redirect user's of my mobile webapp to use Chrome rather than Safari. I tried using the following:
<script>
javascript:location.href="googlechrome"+location.href.substring(4);
</script>
However this constantly opens tabs in Chrome in a loop. Do you know how I can successfully do this?
Cheers,
Dara
This will cause the page to open every time the webpage is loaded, regardless if you are in Safari or Chrome. This is also very poor User Experience to just forward the user to another browser without their input.
It would be better to have some way for the user to open your site in Chrome and also to have an explanation why it is needed.
There are other schemes for https and callbacks: https://developer.chrome.com/multidevice/ios/links#uri_schemes
<p>This webapp is best viewed in Google Chrome</p>
<button type="button" onclick="openInChrome()">Open in Chrome</button>
<script>
var openInChrome = function() {
if (/^((?!Chrome).)*(Safari)+.*$/.test(navigator.userAgent)) {
var protocol = location.href.substring(0,location.href.indexOf(':'));
var url = location.href.substring(location.href.indexOf(':'));
if (protocol === "http") {
location.href = "googlechrome" + url;
}
else {
location.href = "googlechromes" + url;
}
}
}
</script>
Edit:
Added a check to verify they are in Safari.
Well, the reason is pretty obvious; Chrome is instructed to open Chrome too. You just want a userAgent conditional.
if (navigator.userAgent.indexOf("CriOS") == -1) {
location.href="googlechrome"+location.href.substring(4);
}
I would go on my standard rant about user agent checking being bad, but I trust what you're saying about this being a private webapp. Since iOS doesn't let you change your default browser, I guess this is a fair workaround.

Internet Explorer Opening Same Page for Different URLs of same website

I have an application where i am doing new tab pop-ups in internet explorer(8,10,11) using window.open(myurl)
The pop-up triggered by a website contains a URL which is another page of that website. Problem here is that when the pop-up takes place, same webpage opens as the one from where the pop-up is being initiated.
If i copy the URL from address bar of the pop-up window and close all windows and than open that URL in new window of internet explorer only than my required page opens in the pop-up window/tab.
(Note: Same application works perfectly fine in Mozila Firefox without any issue, but it is clients requirement to run my application in IE)
Following is a method which is doing the pop-up:
function handlePhonecallScreenpop(callF, callT, callA, custid, entityN) {
var extraqs = "cf=" + callF;
extraqs += "&ct=" + callT;
extraqs += "&cd=outd";
extraqs += "&ca=" + callA;
extraqs += "&cid=" + custid;
extraqs += "&en=" + entityN;
var url = webUrl() + "/main.aspx?etn=phonecall&pagetype=entityrecord&extraqs=" + encodeURIComponent(extraqs);
window.open(url, "callpop");
}
I'm guessing that you aren't setting a target window name. Which means that you're reusing the same target window for EVERY window.open() call. Try adding an arg to each of your calls:
window.open('firsturl', 'windowA');
vs.
window.open('secondurl', 'windowB');
You should see two different windows.
If you change the name to _blank it should always open in a new window.
window.open(url, "_blank");

Categories