navigator.geolocation returns error from second execution on - IE

Question

When executing navigator.geolocation.getCurrentPosition(success, error, options); for the first time, I'm able to get the user's location. however from the second execution on, the function returns the error:

The current position could not be determined.

I have followed the advice given in this question's answers with no success, how can i get this to work?

Here you can find a working fiddle to quickly see the error.

//Pass this options to the getCurrentPosition
var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};
//function to execute if the current position was succesfully retrieved
function success(pos) {
console.log(pos);
  var crd = {lat: pos.coords.latitude, lng : pos.coords.longitude };
    var myPre = document.querySelector('pre');
  myPre.textContent = JSON.stringify(crd);
  myPre.style.color = someColor(); // use a diferent color just to see it's a new execution of the code
};
//execute this on error
function error(err) {
  var myPre = document.querySelector('pre');
  myPre.textContent = err;
  myPre.style.color = someColor(); // use a diferent color
};
//attach function to button
var myButton = document.querySelector('button');
myButton.addEventListener('click', function(){
    navigator.geolocation.getCurrentPosition(success, error, options);
});

Rolled back edition because I intentionally did not add a code snippet, it doesn't reflect the error and therefore is not useful. Thus the fiddle, where the error can be seen and tested. — Carlos Valencia, Aug 24 '17 at 22:11

Mouser · Answer 1 · 2017-08-24T21:52:16.447

My idea is the following:

The IE user only allows the website (script) (by default settings) to run getCurrentLocation once. The user has to grant an exception for it to run multiple times.

However I don't know (and can't really find any documentation) if this behaviour is by design or a bug. The solution below is a work-around.

Use watchposition instead after the initial succes circumnavigates this bug. See updated fiddle: https://jsfiddle.net/b2rnr7tw/6/

In this fiddle I set up a watchPosition and as soon as it updates it shows the new location. After that it is cancelled (else it keeps updating).

//Pass this options to the getCurrentPosition
var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

var watch = null;
var watchId = null;
//function to execute if the current position was succesfully retrieved
function success(pos) {

  var crd = {lat: pos.coords.latitude, lng : pos.coords.longitude };
  var myPre = document.querySelector('pre');
  myPre.textContent = JSON.stringify(crd);
  myPre.style.color = someColor(); // use a diferent color
  watch.clearWatch(watchId); //after success clear the watchId.
};
//execute this on error
function error(err) {
  var myPre = document.querySelector('pre');
  myPre.textContent = err;
  myPre.style.color = someColor(); // use a diferent color
  //keep running the watchPosition if on error, however you can use a counter to only try it a few times (recommended)
};
//attach function to button
var myButton = document.querySelector('button');
myButton.addEventListener('click', function(){
  if (!watch)
  {
    watch = navigator.geolocation;
    watch.getCurrentPosition(success, error, options);
   }
   else
   {
   watchId = watch.watchPosition(success, error, options);
   }
});

Thanks, I couldn't find any documentation either, your method works but there is a strange behaviour, from the second execution, when we start executing watchPosition instead of getCurrentPosition, it executes the error function and then the success function, so visually you can see it threw an error and shortly after the text is updated with the Lat and Lng values, just tried with a couple different computer, do you get this as well? I saw the function's docs but the order of the parameters sent is fine — Carlos Valencia, Aug 24 '17 at 22:32
I got the visual behaviour as well, but that can be easily corrected with some extra code. — Mouser, Aug 24 '17 at 22:35

score 1 · Answer 2 · edited Oct 20 '17 at 07:57

Mouser's solution worked for me in IE11 however breaks Edge, so we need browser detection. Here is my solution tested in IE11, Edge 14, FFx and Chrome (latest versions of FFx and Chrome at time of writing)

            var currentPositionHasBeenDisplayed = false;

            if (navigator.geolocation) {

                var options = {};

                var isIE = document.documentMode; //IE 8+

                // IE only allows one call per script to navigator.geolocation.getCurrentPosition, so we need a workaround
                if (currentPositionHasBeenDisplayed == true && isIE) {
                    navigator.geolocation.watchPosition(
                         function (pos) {
                             var myLatLng = new google.maps.LatLng(parseFloat(pos.coords.latitude), parseFloat(pos.coords.longitude));
                             map.setCenter(myLatLng);
                         },
                         function (error) {  },
                         options);
                }
                else {
                    navigator.geolocation.getCurrentPosition(
                        function (pos) {
                            var myLatLng = new google.maps.LatLng(parseFloat(pos.coords.latitude), parseFloat(pos.coords.longitude));
                            map.setCenter(myLatLng);
                            currentPositionHasBeenDisplayed = true;
                        }, 
                        function (error) { return false; },
                        options);
                }
            }

I have implemented the same but it breaks the IE11, also I tried clearing the watch position after watch success.. :( — Vivek Vikranth, Aug 14 '18 at 07:42

navigator.geolocation returns error from second execution on - IE

2 Answers2