High accuracy geolocation Html5
Here's a simple example of enableHighAccuracy: true
taken from the Mozilla Developer Network.
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}`);
}
navigator.geolocation.getCurrentPosition(success, error, options);
You need a PositionOptions
object, in which you set the high accuracy flag following the API.
I am quoting from here: http://diveintohtml5.info/geolocation.html
The getCurrentPosition() function has an optional third argument, a PositionOptions object. There are three properties you can set in a PositionOptions object. All the properties are optional. You can set any or all or none of them.
POSITIONOPTIONS OBJECT
Property Type Default Notes
--------------------------------------------------------------
enableHighAccuracy Boolean false true might be slower
timeout long (no default) in milliseconds
maximumAge long 0 in milliseconds
So, it should work like this:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
var coords = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: 15,
center: coords,
mapTypeControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var capa = document.getElementById("capa");
capa.innerHTML = "latitude: " + latitude + ", longitude: " + ", accuracy: " + accuracy;
map = new google.maps.Map(document.getElementById("mapContainer"), mapOptions);
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "ok"
});
},
function error(msg) {alert('Please enable your GPS position feature.');},
{maximumAge:10000, timeout:5000, enableHighAccuracy: true});
} else {
alert("Geolocation API is not supported in your browser.");
}
Noticed I added the following 2 parameters to getCurrentPosition
call:
function error(msg){alert('Please enable your GPS position future.');}
This function is called when GPS could not be retrieved or the timeout has been triggered.
{maximumAge:10000, timeout:5000, enableHighAccuracy: true});
These are the options. We don't want gps data that is older than 10 seconds (
maximumAge:10000
). We don't want to wait longer than 5 seconds for a response (timeout:5000
) and we want to enable high accuracy (enableHighAccuracy: true
).
Also see: Geolocation HTML5 enableHighAccuracy True , False or Best Option?