Advertise

Monday, 3 September 2012

HTML5 - GEOLOCAITON

Monday, September 03, 2012 , , 0 comments

Desc

The HTML5 Geolocation API is used to get the geographical position of a user. Since this can compromise user privacy, the position is not available unless the user approves it.
code from Head First HTML5 Programming: Building Web Apps with JavaScriptchapter 5 Making your HTML location aware: Geolocation

Source Code - Javascript

window.onload  = getMyLocation;
    
    function getMyLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                displayLocation, 
                displayError);
        }
        else {
            alert("Oops, no geolocation support");
        }
    }
    
    function displayLocation(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;

        var div = $("#location");
        div.html("You are at Latitude:" + latitude + ", Longitude: " + longitude);
 
    }
    
function displayError(error) {
    var errorTypes = {
        0: "Unknown error",
        1: "Permission denied",
        2: "Position is not available",
        3: "Request timeout"
    };
    var errorMessage = errorTypes[error.code];
    if (error.code == 0 || error.code == 2) {
        errorMessage = errorMessage + " " + error.message;
    }
    var div = document.getElementById("location");
    div.innerHTML = errorMessage;
}

Source Code - html


<!doctype html>
<html>
<head>
<title>Where am I?</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="myLocj.js"></script>

<link rel="stylesheet" href="myLoc.css">
</head>
<body>

<div id="location">
Your location will go here.
</div>

</body>
</html>

0 comments:

Post a Comment