Hello Everyone!!
Nowadays, We can use the HTML5 to find the Geo-location of the user. Earlier IP was the source of getting the location of the user so that we used additional scripting and also the calling of the server, but using html 5 we can do it at the user end.
W3C has developed an API, called geolocation API , is used to find the location of the user if the user want to share there location on the web. It allows all the devices (like iPhone, tablet, Android) and desktop and laptop.
CODE:-
<!DOCTYPE>
<html>
<head>
<title></title>
<meta name="Author" content="Sudhanshu">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#btGeoLocation").click(get_geolocation);
});
function get_geolocation() {
// set a callback for the position when ready
navigator.geolocation.getCurrentPosition(geolocation_cb);
}
function geolocation_cb(geo){
alert('Lat: ' + geo.coords.latitude + ' ' + 'Lon: ' + geo.coords.longitude);
}
</script>
</head>
<body>
<button id="btGeoLocation" >Get Geo-Location</button>
</body>
</html>
When the user click the button for share the location then we find the location of the user by using getCurrentPosition() function.
Showing A Map Using The Geolocation:-
we can use map also to show the location of the user .
CODE:-
<html>
<head>
<title></title>
<meta name="Author" content="Sudhanshu">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#btGeoLocation").click(get_geolocation);
});
function get_geolocation() {
// set a callback for the position when ready
navigator.geolocation.getCurrentPosition(geolocation_cb);
}
function geolocation_cb(geo){
// create google maps image url
var map_image_url = "http://maps.google.com/maps/api/staticmap?sensor=false¢er=" + geo.coords.latitude + ',' + geo.coords.longitude + "&zoom=10&size=500x500&markers=color:blue|label:S|" + geo.coords.latitude + ',' + geo.coords.longitude;
// clear any previous map
$('#mapimg').remove();
$('#map').append($('<img>').attr('src',map_image_url).attr('id','mapimg'));
}
</script>
</head>
<body>
<button id="btGeoLocation" >Get Geo-Location</button>
<span id="map"></span>
</body>
</html>
0 Comment(s)