I have a google map embedded in a Bootstrap site. I am busy testing on different mobile devices and when I am on iOS and I open the page with the embedded map on it, the maps app on the device is opened.
I don't think I am doing anything fancy, but I would just like it to stop. This does not occur on Android devices.
My HTML is as follows:
<section>
<div class="well well-sm">
<iframe width="100%" height="350" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=central%2Bpark&ie=UTF8&z=12&t=m&iwloc=near&output=embed"></iframe>
</div>
</section>
This is the default behavior of iphone/ipad with regard to maps. To change the behavior follow these steps as stated in Google Support :
1.Visit the Search Settings page from your iPhone or iPad.
2.Scroll down to the "Google Maps" section.
3.Select Never use the native app.
4.Touch Save at the bottom of the page.
Related
I'm having a problem, that iOS' and osx' voice over reads the <hr> tags of my website. I tried to not allow the user to tab to it with tabindex="-1" attribute, but seems like it is getting ignored and I can switch to my HR tag, and voice over reads it.
Any ideas?
(tried it on ios - safari & chrome, osx - safari & chrome)
Aight, found a solution, aria-hidden="true" for the elements I want to hide from the voice over works.
tested on iPhone and iPad running iOS12, in chrome and safari
Bug description: after interacting (zooming in/out) with google map (integrated in the site by an iframe) on an iOS device (tested on iOS12) using either chrome or safari, clicking on links outside the map does nothing.
try it out here on codepen
interestengly enough, the bug doesn't happen in jsfiddle
here is a youtube video I made if you don't have an iOS device.
happens on my site which is a plain html page with google maps iframe like so (no other javascript, css files are added for testing purposes):
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12101.03207249142!2d-74.04012067655368!3d40.690314788042684!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25090129c363d%3A0x40c6a5770d25022b!2sStatue+of+Liberty+National+Monument!5e0!3m2!1sen!2sus!4v1537933952825" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
the above iframe is obtained straight from google maps "share > embed a map" feature.
Any clues how to get around this bug?
After some research, I have found a solution that works properly.
If you add an event listener to the body it will fix the problem.
document.body.addEventListener("fooAction", function(e) {
// something that does nothing
});
Using iphone 5se. IOS 10. Phonegap v0.4.5
I have tried a number of methods to open a link to another page from my index.html. Will not work. Same for a standard input Submit button. Will only work if the Target is changed to _System. Then that causes the safari browser to open my target page in the Safari browser. Effectively navigating away from my phonegap window. Have tried various access rights.
for example. Not able to get any pages to open in the phonegap app window on.
<script>
function loginCheck()
{
alert("Login");
window.open("http://192.168.1.111:3000/user_login.html","_self");
}
</script>
<input type="submit" class="submitbtn" name="submit" id="submit" value="Login" onclick="loginCheck()">
Recently we found problems that sometimes our webpage crashes on iOS. Its happening both in Chrome and Safari. Has anyone idea how to debug it, or why its happens ?
Its hard to reproduce (actually on some phone we were not able to). So we are trying turning off some components from the page. The page contains lot of HTML (20-100 pages) and some bit heavy javascript components, such as maps, street view or even graphs.
Thanks for any idea or hint. Thanks!
You can debug the webpage, when it is loading on your mobile browser(Safari).
Follow the below steps:
Connect your iOS device to MAC--> open Safari on MAC --> In the menu bar you can see Develop option --> On selecting the develop option it will show all the connected devices--> keep the menu popup open and browse your webpage on the connected iOS device.
Note : If your device doesn't show up in the develop option please enable it in iOS device settings --> Safari --> advanced --> Web Inspector.
I have added the following meta info in the head portion of my test web page.
<html>
<head>
<meta property="al:ios:url" content="schemeregisteredinapp://hereGoesTheURL" />
<meta property="al:ios:app_store_id" content="12345" />
<meta property="al:ios:app_name" content="Applinks Supporting App" />
</head>
<body>
<p>Opening a link to this page in Facebook iOS app should launch my "Applinks Supporting App".
</p>
</body>
</html>
I have added the custom url scheme schemeRegisteredInApp in my iOS app's info.plist. If I type a url of the format schemeRegisteredInApp://the/rest/of/the/path in iOS Safari browser, it successful launches my app.
But if I tap on a link to the webpage containing above mentioned HTML in Facebook app or Mailbox app (both are supposed to support applinks protocol) on iOS, the page just opens in a web view inside the Facebook app. My iOS app is never launched. I can't figure out what is going wrong. Applinks simply refuses to work as advertised. This is on iOS 8. Is Applinks broken?
Add the following to your website meta data and the Facebook iOS app will open your app directly.
<meta property="al:web:should_fallback" content="false" />
If that doesn't work then you still have other issues with your meta data. Best way to debug is to go to developers.facebook.com/tools/debug/og/object and type in your url and select 'Show existing scrape information'. If there are any errors it won't work. Fix the problems and hit the 'Fetch new scrape information' button. Then kill the Facebook iOS app and relaunch it. Then the AppLink will work as expected next time you press the item in the FB feed.
I tested on iOS 7. Before I updated to the latest Facebook app, I can see a popup at the bottom of the Facebook browser which leads me to my own app. Right after I updated the Facebook app to latest version, the popup doesn't show anymore. Same doesn't work on iOS 8. Maybe a bug in newest Facebook version. Hope to see they fix it or find a workaround.
I just checked the example you provided. For me it correctly shows a popup to install your app, but when installed it doesn't recognise it as being installed.
I inspected your app's plist and it seems that you haven't registered the URLSchema there. That is needed for Applinks to check if the app is installed or not.
Can you test this with a project where you have defined the Appschema in your app's plist?
If you want that link works in optional way when it launches app or open web page if app is not installed you need to add following meta-tag:
<pre>
<meta property="fb:app_id" content="[facebook app id]" />
</pre>
It does matter whether facebook app id exists or not. It will work properly in iOS only if it is exists. However Facebook on Android will open web view first still but allow to launch app from this page.
Following meta tag must be removed:
<pre>
<meta property="al:web:should_fallback" content="..." />
</pre>