Geolocation on webpage not working

I have used the script below many times before although recently I have not been able to get it to work. When I try and run it I get the error Location information is unavailable.

I am not sure why. I have checked update notes of browsers etc. to see if this is a function that has been removed and I can't find reference to this being the case.

If anyone has any idea as to what I am doing wrong, I would be most grateful if you are able to point me in the right direction.

Thanks in advance!

<!DOCTYPE html>
<html>
<body>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;
}

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}
</script>

</body>
</html>

Solution

I assume that You are using Chrome and Your website doesn't have SSL right? Unfortunately gelocation doesn't work on Chrome in that conditions. You must test on other browser ie. Firefox or get SSL for Your website.