Determine User Location by using HTML5

Hello Friends,

You can determine user location by using HTML5 and Google Map easily. For that, you have to crate a HTML5 file by using your favorite compiler. I am using dreamweaver CS5.

The basic code of HTML5 are-

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
</body>
</html>

After than, you have to write down the below code into body tag.

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

Now, in the head tag, you have to write down the functions below-

function getUserLocation() {
 if (navigator.geolocation)
 navigator.geolocation.getCurrentPosition(displayLocation, displayError);
 else
 document.getElementById("locationData").innerHTML = "Sorry - your browser doesn't support geolocation!";
}
function displayLocation(position) {
 var displayText = "User latitude is " + position.coords.latitude + " and longitude is " + position.coords.longitude; document.getElementById("locationData").innerHTML = displayText;
}
function displayError(error) {
var locationElement = document.getElementById("locationData");
 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;
 }
}

Now, save this file with your Desiree name with the extension and run this.

After running this file, you will get a button into your body. When you will click into this button, then you will get the User latitude and longitude  .

Now, you can find out this user easily in google map by using this latitude and longitude in various web services.

Thanks for reading.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s