User Location using HTML5

by Yamini Sontakke

HTML

<body>
    <input type="button" value="get location" onclick="getUserLocation()" />
    <div id="locationData">Location data here</div>
</body>

JavaScript

/*Location functions here*/
var getUserLocation = function () {
    console.log("getting location");
    //check if the geolocation object is supported, if so get position
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(displayLocation);
    } else {
        document.getElementById("locationData").innerHTML = "Sorry - your browser doesn't support geolocation!";
    }
};


var displayLocation = function (position) {

    //build text string including co-ordinate data passed in parameter
    var displayText = "User latitude is " + position.coords.latitude + " and longitude is " + position.coords.longitude;

    //display the string for demonstration
    document.getElementById("locationData").innerHTML = displayText;
};


/*var displayError = function (error) {

    //get a reference to the HTML element for writing result
    var locationElement = document.getElementById("locationData");

    //find out which error we have, output message accordingly
    switch (error.code) {
        case error.PERMISSION_DENIED:
            locationElement.innerHTML = "Permission was denied";
            break;
        case error.POSITION_UNAVAILABLE:
            locationElement.innerHTML = "Location data not available";
            break;
        case error.TIMEOUT:
            locationElement.innerHTML = "Location request timeout";
            break;
        case error.UNKNOWN_ERROR:
            locationElement.innerHTML = "An unspecified error occurred";
            break;
        default:
            locationElement.innerHTML = "Who knows what happened...";
            break;
    }
};*/