Issue with geolocation in IE11

Question

I have the following code that requests the user to allow their current location in the browser, when they click/tap on the location-link.

This works fine in Chrome, Safari and Firefox but I can't get it to work in IE11. Some times it shows the browser notification for the user to give their location but then nothing happens.

I wondered if anyone else has had issues with Google Maps and requesting location in IE11 and also if anyone has a solution?

<p id="error"></p>
<form action="/" method="post">
<a class="location-link" id="location-link" href="#"><img src="/static/images/icons/location.png" alt="Get your current location" title="Get your current location" /></a><input type="text" name="location" value="" placeholder="Find a salon" >
<input class="viewbtn3" value="Submit" type="submit"></form>
<script src="/static/js/jquery.1.9.1.js"></script>
<script src="https://maps.google.com/maps/api/js?sensor=true"></script>

<script type="text/javascript">
$(document).ready(function() {
    if (typeof navigator.geolocation == "undefined") {
        $("#error").text("Your browser doesn't support the Geolocation API");
        $(".location-instruction span").hide();
        $(".location-link").hide();
        return;
    }
    $("#location-link").click(function(event) {
        event.preventDefault();
        var addressId = this.id.substring(0, this.id.indexOf("-"));
        var thisid = $(this).attr("id");
        //console.log(thisid);
        navigator.geolocation.getCurrentPosition(function(position) {
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({
                location: new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
            }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    $("#" + thisid).parent().find('input[name="location"]').val(results[0].formatted_address);
                    $(".choose_wrap").addClass('sucess');
                } else {
                    $("#" + thisid).parent().find("#error").html("Unable to retrieve your address<br />");
                    $(".choose_wrap").addClass('fail');
                }
            })
        }, function(positionError) {
            $("#" + thisid).parent().find("#error").html("Error: " + positionError.message + "<br />")
        }, {
            enableHighAccuracy: true,
            timeout: 10 * 1000
        })
    });
});
</script>

Answer 1

This actually worked for me on IE11 with no changes when I tried it out on Codepen:

$(document).ready(function() {
    if (typeof navigator.geolocation == "undefined") {
        $("#error").text("Your browser doesn't support the Geolocation API");
        $(".location-instruction span").hide();
        $(".location-link").hide();
        return;
    }
    $("#location-link").click(function(event) {
        event.preventDefault();
        var addressId = this.id.substring(0, this.id.indexOf("-"));
        var thisid = $(this).attr("id");
        //console.log(thisid);
        navigator.geolocation.getCurrentPosition(function(position) {
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({
                location: new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
            }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    $("#" + thisid).parent().find('input[name="location"]').val(results[0].formatted_address);
                    $(".choose_wrap").addClass('sucess');
                } else {
                    $("#" + thisid).parent().find("#error").html("Unable to retrieve your address<br />");
                    $(".choose_wrap").addClass('fail');
                }
            })
        }, function(positionError) {
            $("#" + thisid).parent().find("#error").html("Error: " + positionError.message + "<br />")
        }, {
            enableHighAccuracy: true,
            timeout: 10 * 1000
        })
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maps.google.com/maps/api/js?sensor=true"></script>
<p id="error"></p>
<form action="/" method="post">
  <a class="location-link" id="location-link" href="#"><img src="/static/images/icons/location.png" alt="Get your current location" title="Get your current location" /></a>
  <input type="text" name="location" value="" placeholder="Find a salon">
  <input class="viewbtn3" value="Submit" type="submit">
</form>

• http://codepen.io/anon/pen/oXZxgz

Only thing I can suggest is to check the developer console to see if there are any errors when you test it.

Answer 2

I tried this out on Windows 8. If the location settings on the machine (see Control Panel/Change Location Settings) are turned off, an error message is returned. In the above code "nothing happens". "#error" and "#location-link" don't share the same parent, so this line does not display the error message:

$("#" + thisid).parent().find("#error").html("Error: " + positionError.message + "<br />")

Is this issue preventing the "Geo-location not turned on" message from showing up on client machines?