We Keep Coding

HTML/Javascript: access to geolocation from local HTML file

I'm trying to implement a web page which displays your location on a map. Given that the person accessing the web page may not have internet access, I want the web page to be a local HTML file.
These days, for security reasons, it doesn't seem to be possible to access geolocation form a local HTML file.
Any ideas as to how I can get access to geolocation from a local HTML file?
Thanks
I have tried accessing my local HTML file via a local web server but these only allow http pages whereas geolocation seems to be dependent upon an https file.

To use Geolocation API your application should run on HTTPS protocol or on the localhost web server. Otherwise, Geolocation API will not work.
Most of all you will get the coordinates of your internet provider stations :)
navigator.geolocation.getCurrentPosition(showPosition);
function showPosition(position) {
console.log("Latitude: " + position.coords.latitude +
" Longitude: " + position.coords.longitude);
}

<button onclick="getLocation()">Get Location</button>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert("Geolocation is not supported by this browser.");
}
}
function showPosition(position) {
alert("Latitude: " + position.coords.latitude +
"\nLongitude: " + position.coords.longitude);
}
</script>

Google Chrome: Override geolocation via console

So a little background for my question; I am writing a simple driving instructions web application using Google Maps directions API which provides me with a LatLng path along with text instructions.
In order to test this application (without driving around in a car) I need to simulate a geolocation-path. Google Chrome supports overriding geolocation data via the sensors developer settings, which works fine with one coordinate at the time.
So my question is - is it possible to set the browsers navigator.geolocation data via the console (i.e. javascript api) instead manually updating the value in the sensors settings menu?
I know that in this case I could just use another input source than the browser geolocation data and use a static array of LatLng's, or override the browsers navigator.geolocation.getCurrentPosition, but I figured that it would be more sophisticated to override the sensors instead.
Thanks in advance.

One way is to override the function navigator.geolocation.getCurrentPosition with your own custom function. Inside the custom function you can customize the value of latitude & longitude.
var customPosition = {};
customPosition.coords = {};
customPosition.coords.latitude = 41.89;
customPosition.coords.longitude = 2.89;
navigator.geolocation.getCurrentPosition = function(success, error){
success(customPosition);
};
function success(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
console.log("latitude: " + latitude);
console.log("longitude: " + longitude);
}

To detect current geo location in mobile device

I've used below code to detect the current location in angular app. this is working fine with all the desktop browser but it not working in mobile device please find below code for more understanding.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(onPositionUpdate,locNotFound,{frequency:5000,maximumAge: 0, timeout: 100, enableHighAccuracy:true});
} else {
// nothing
}
function locNotFound () {
console.log('location not found');
}
function onPositionUpdate(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var url = "https://maps.googleapis.com/maps/api/geocode/json?latlng=" + lat + "," + lng + "&sensor=true";
$http.get(url)
.then(function(result) {
console.log(result);
});
}
As you can see that locNotFound() function is called in mobile device. which it should not do because GPS on in mobile device.

I just can give you a partial answer for Android.
Please open the Chrome Browser at Android, click at the icon top right (the tree dots), click at Settings, click at Site Settings and please check the settings for Location. As far as I know this is disabled per default.
So I think your problem is related to security restrictions
Regards
Michael

javascript - geolocation not working in codepen

I'm trying to implement a simple weather app in codepen. The app works fine on localhost
It asks for permission to use navigator.geolocation and if accepted it shows the weather,
but on codepen it's not even asking for permission.
here is the link
http://codepen.io/asamolion/pen/BzWLVe
Here is the JS function
function getWeather() {
'use strict';
$('#getWeatherButton').hide();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var url = 'http://api.openweathermap.org/data/2.5/weather?APPID=53ac88144e6ee627ad0ed85277545ff9';
// var url = 'example.js';
var apiCall = url + '&lat=' + position.coords.latitude + '&lon=' + position.coords.longitude;
// window.location.href = apiCall;
$.getJSON(apiCall, function (json) {
setSkycon(parseInt(json.weather[0].id, 10));
$('#location').html(json.name + ', ' + json.sys.country);
var temp = (Math.round((json.main.temp - 273.15) * 100) / 100);
$('#temp').html(temp + '<span id="degree">°</span><span id="FC" onclick="convert()">C</span>');
$('#condition').html(json.weather[0].main);
});
});
}
};
Can anybody tell me why codepen is not asking for permission?

I had this same problem on the same challenge. Simply prepend your codepen with https instead of http and you'll be fine.
Like this:
https://codepen.io/crownedjitter/pen/AXzdvQ
if you want to use this:
navigator.geolocation.getCurrentPosition();
in Chrome.

According to the console in Chrome:
getCurrentPosition() and watchPosition() are deprecated on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS.
There's more details here: https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins Essentially Chrome only wants to send location information over HTTPS. However, in order to allow developers to test they treat localhost as if it were a secure network. Hope this helps!

Starting with Chrome 50, Chrome stopped supporting geolocation on unsecured protocols.
https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only

Get latitude and longitude of user in PHP or JavaScript for use in PHP

I have an Android app which gets the user's location (latitude and longitude). The latitude and longitude is used to query a database via a web service.
I am in the process of developing a website which will be another gateway into the backend. In order to make the website useful I need to get the latitude and longitude of the user, as the results are sorted by distance (i.e. distance from user's location to location of returned data which is a bar/restaurant).
So how do I get the latitude and longitude of the user?

It is not possible via PHP directly although if you are creating a website you can use the javascript geolocation API to query the browser about what it knows about the users current location:
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
}
</script>
I have simply copied the code example from w3 schools vertabrim.
Source:
http://www.w3schools.com/html/html5_geolocation.asp