The HTML 5 has concept of Geo Location that lets you read current address of the user, So if your using a mobile device it will give you current address using GPS but if your using normal Laptop or Desktop it still gives you current address with less accuracy. In my case it gives address of AT&T office which is my internet provider. I wanted to figure out how GeoLocation API's work so i build this sample application that displays my current address. You can download the Geolocation.html file from
here
This is how my Geolocation.html page looks like in browser
My Geolocation.html page has one
Get Location button when you click on that button it will show you address of the current location. Now the address is not always accurate. Also i tested this code in Firefox 12.0 and Internet Explorer 9, the Geolocation code does not work in Chrome if your accessing the file directly from file system i mean using
file:// URL.
This is the source code for the Geolocation.html
<!DOCTYPE html>
<html>
<head>
<title>GeoLocation</title>
<script src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript" charset="utf-8">
function getLocation(){
console.log("Entering getLocation()");
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(
displayCurrentLocation,
displayError,
{
maximumAge: 3000,
timeout: 5000,
enableHighAccuracy: true
});
}else{
console.log("Oops, no geolocation support");
}
console.log("Exiting getLocation()");
};
function displayCurrentLocation(position){
console.log("Entering displayCurrentLocation");
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
console.log("Latitude " + latitude +" Longitude " + longitude);
getAddressFromLatLang(latitude,longitude);
console.log("Exiting displayCurrentLocation");
}
function displayError(error){
console.log("Entering ConsultantLocator.displayError()");
var errorType = {
0: "Unknown error",
1: "Permission denied by user",
2: "Position is not available",
3: "Request time out"
};
var errorMessage = errorType[error.code];
if(error.code == 0 || error.code == 2){
errorMessage = errorMessage + " " + error.message;
}
alert("Error Message " + errorMessage);
console.log("Exiting ConsultantLocator.displayError()");
}
function getAddressFromLatLang(lat,lng){
console.log("Entering getAddressFromLatLang()");
var geocoder = new google.maps.Geocoder();
var latLng = new google.maps.LatLng(lat, lng);
geocoder.geocode( { 'latLng': latLng}, function(results, status) {
console.log("After getting address");
console.log(results);
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
console.log(results[1]);
alert(results[1].formatted_address);
}
}else{
alert("Geocode was not successful
for the following reason: " + status);
}
});
console.log("Entering getAddressFromLatLang()");
}
</script>
</head>
<body>
<h1>Display the map here</h1>
<input type="button" id="getLocation"
onclick="getLocation()" value="Get Location"/>
<div id="map"></div>
</body>
</html>
When you click on Get Location button the control goes to
getLocation() function which first checks if the browser supports GeoLocation API by checking
navigator.geolocation object, if that object is not null that means browser supports GeoLocation and we ask browser for current location by calling
navigator.geolocation.getCurrentPosition() with
displayCurrentLocation() as a call back function if the current location lookup was successful.
The browser calls
displayCurrentLocation() function with current location using position object, which has longitude and latitude as properties. The latitude and longitude would have values like
Latitude 37.5668988 Longitude -121.9753273, so we have to use the Google MAP API to get street address from the longitude and latitude values, for that we call
getAddressFromLatLang function.
Inside the
getAddressFromLatLang() function i am creating object of
google.maps.Geocoder and calling its
geocode() method with latitude and longitude and it returns array of addresses for that location. Once i have the address i can print it using alert.
This is screen shot of screen that is displayed to the user after successful login
I followed these steps to create the secured web application
