We Keep Coding

Ios mobile doesn't ask geolocation permission

I'm trying to use the Google Maps API and get current location.
my page is being served over HTTPS.
I have no problems on Android devices. The browser wants location permission and I can get my location. But ios phone does not want access permission and gives location permission error.
is there anything i can do to ask for access permission for ios phone?
Here is my code
function findMyPlace() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError, { timeout: 20000 });
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
//do something
}

In the documentation for getCurrentPosition over at MDN
you can see that getCurrentPosition() has an error callback. Apply the error callback and see what type of response you get. I've added a code-sample below.
function findMyPlace() {
if (window.navigator.geolocation) {
window.navigator.geolocation.getCurrentPosition( (position) => {
console.log(position.coords);
}, (e) => {
console.log(e);
});
} else {
console.log("navigator not supported");
}
}
findMyPlace();

blocked Access to geolocation was blocked over secure connection with mixed content to https://localhost:3000

I have implemented the devise omniauth setup and when I’m signed in with either Facebook, twitter or google the html5 geolocation returns a position unavailable error. But when I'm logged in as regular devise user it works just fine! How can I allow access to the html5 geolocation on my rails app when logged in with a social media account?
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(setGeoCookie,showError);
} else {
alert("Geolocation is not supported by this browser.");
}
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
window.location = window.location;
window.alert("Permission denied");
break;
case error.POSITION_UNAVAILABLE:
window.location = window.location;
window.alert("Location information is unavailable.");
break;
case error.TIMEOUT:
window.location = window.location;
window.alert("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
window.location = window.location;
window.alert("An unknown error occurred.");
break;
}
location.reload();
}
Update 1
I changed the code to the following and I'm getting the following errors inside the browser console:
Origin does not have permission to use Geolocation service
[blocked] Access to geolocation was blocked over secure connection with mixed content to https://localhost:3000.
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error, options);
} else {
alert("Geolocation is not supported by this browser.");
}
}
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
function success(pos) {
var crd = pos.coords;
console.log('Your current position is:');
console.log(`Latitude : ${crd.latitude}`);
console.log(`Longitude: ${crd.longitude}`);
console.log(`More or less ${crd.accuracy} meters.`);
}
function error(err) {
console.warn(`ERROR(${err.code}): ${err.message}`);
}
Any ideas on how to unblock this?

This is not a rails issue but a Javascript issue. Somewhere in your template, CSS, or Javascript you load something from http instead of https. Use your browser's inspector to find the culprit.

Google Maps API doesn't work on IOS safari

UPDATE: it doesn't work only on safari mobile (chrome for ios works correctly).
I am trying to get user location using google maps API.
It works correctly on desktop FF and Chrome (shows city and country) but it doesn't show anything on iOS safari (iOS 11). Also it seems that it doesn't work properly on some other mobile devices.
Note that I am using HTTPS so there are no problems with security.
Here's javascript code:
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{
document.getElementById("userlocation").innerHTML="Geolocation is not supported by this browser.";
}
}
function showPosition(position){
lat=position.coords.latitude;
lon=position.coords.longitude;
displayLocation(lat,lon);
}
function showError(error){
switch(error.code){
case error.PERMISSION_DENIED:
document.getElementById("userlocation").innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
document.getElementById("userlocation").innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
document.getElementById("userlocation").innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
document.getElementById("userlocation").innerHTML="An unknown error occurred."
break;
}
}
function displayLocation(latitude,longitude){
var geocoder;
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(latitude, longitude);
geocoder.geocode(
{'latLng': latlng},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
var add= results[0].formatted_address ;
var value=add.split(",");
count=value.length;
country=value[count-1];
state=value[count-2];
city=value[count-3];
document.getElementById("userlocation").innerHTML = city + ", " + country;
}
else {
document.getElementById("userlocation").innerHTML = "address not found";
}
}
else {
document.getElementById("userlocation").innerHTML = "Geocoder failed due to: " + status;
}
}
);
}
And here's HTML:
<body onload="getLocation()">
<p id="userlocation">Getting your location ...</p>
</body>
Thanks in advance.

In your mobile device, you have to enabled the geolocation for safari in the settings. If the geolocation is disabled, nothing will append.
Try this manipulation:
Go to settings.
Next, go to the confidentiality (with a hand in the left of the scroll menu).
Then, click to the location service bar.
Scroll down and accept the location's service for safari.
Tell me if you have some questions

Catch html5 geolocation events

Is there a way to catch the html5 geolocation events?
Right now im using geolocator.js
and my problem is:
When the message pops up if i want to allow html5 locations if i accept it takes html5 location if I get ipLocation.
But I want to listen for these clicks so I can set a timeout if the user doesn't click for 10 seconds it automatically takes ip location.
Is there any way to get the event for "accept" and "decline"? Here is my code snippet for it
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, html5Options);
} else { // not supported
fallback(new Error('geolocation is not supported.'));
}
EDIT: Im using Chrome on iMac
EDIT 2:
var html5Options = { enableHighAccuracy: true,timeout: 10000, maximumAge: 0 };
EDIT 3: using the solution by kravitz
if (navigator.geolocation) {
waitTooLong=setTimeout(geoError, 15000);
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, html5Options);
} else { // not supported
fallback(new Error('geolocation is not supported.'));
}
function geoSuccess(position) {
clearTimeout(waitTooLong);
//doing my locationstuff
}
function geoError(error) {
//doing my locationstuff
clearTimeout(waitTooLong);
fallback(error);
}

var geoError = function(){
//get location failed so get manually by IP here
};
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, html5Options);
} else { // not supported
fallback(new Error('geolocation is not supported.'));
}
Above should work but if you want to be really sure:
var timeOut = setTimeout(geoError, 10000);
var geoSuccess = function(){
clearTimeout(timeOut);
};

How to detect the status of the element navigation in js?

I need to get users latitude and longitude from browser, but on most of browsers are some restrictions that doesn't let to do it. How to tell users that his geolocation is off or it simply doesn't support it?
I tried something like this, but neither ipad or safari on my mac prompt anything.
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(success);
else
alert('not supported');

DEMO: http://jsfiddle.net/7sRdS/
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
// ...
}, function(error) {
//error handling
switch(error.code) {
case error.PERMISSION_DENIED:
//User denied the request for Geolocation.
break;
case error.POSITION_UNAVAILABLE:
//Location information is unavailable.
break;
case error.TIMEOUT:
//The request to get user location timed out.
break;
case error.UNKNOWN_ERROR:
//An unknown error occurred.
break;
}
alert("Geolocation error: " + error.code);
},
{
timeout:10000 //10s
});
} else {
alert("Geolocation services are not supported by your browser.");
}

Take a look at modernizr which provides multiple feature detection tests.