Display Geolocation using HTML 5
Using geolocation feature we can find
our location in globe. As geolocation will show your current geographical position
in world, so it’s very much perfect with mobile devices, say for
Mibile phone, ipod and other PDA
devices. Copy and paste the below code to display your altitude and longitude.
Add below code in body tag of your web page
<p id="mybutton">Click
button to get location </p>
<button
onclick="getLocation()">Try It</button>
<script>
var
x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this
browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
Ploting your location using google map.
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click
button to get position </p>
<button
onclick="getLocation()">Click me</button>
<div
id="mapholder"></div>
<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)
{
var
latlon=position.coords.latitude+","+position.coords.longitude;
var
img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img
src='"+img_url+"' />";
}
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>
Here displaying map according to
location is very simple. I have use google’s map API to spot location onto map.
No comments:
Post a Comment