Francesc VE Francesc VE - 4 months ago 14
HTML Question

High accuracy geolocation Html5

I am tring to locate a device using the embedded GPS (like whats app share location). I've read that it is possible with EnableHighAccuracy: true.

How can I set "enableHighAccuracy: true" in this code? I tried in different positions but it doesn't work.

<script type="text/javascript">
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 = "latitud: " + latitude + " longitud: " + " aquesta es la precisio en metres : " + accuracy;

map = new google.maps.Map(
document.getElementById("mapContainer"), mapOptions
);
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "ok"
});


});

}else {
alert("Geolocation API is not supported in your browser.");
}

</script>


Thanks a lot!

Answer

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 = "latitud: " + latitude + " longitud: " + "   aquesta es la precisio en metres  :  " + 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 future.');  

  }, {maximumAge:600000, timeout:5000, enableHighAccuracy: true});

}else {
    alert("Geolocation API is not supported in your browser.");
}

Noticed I added the following 2 params to getCurrentPosition call:

,function error(msg){alert('Please enable your GPS position future.');}  

, {maximumAge:600000, timeout:5000, enableHighAccuracy: true});

Also see: Geolocation HTML5 enableHighAccuracy True , False or Best Option?