webgranth
HTML5 has been emerges as a robust and powerful platform to accomplish any kind of project with great advantages and features. As, I have already published various posts regarding HTML5 and HTML5 Tutorial to accomplish elegant and spectacular projects. However, today I am going to include one more tutorial for HTML5 through which you can detect geolocation on web browsers in very simple and affable way and without meeting any hindrances.
In recent, many web browsers except lame Internet Explorer supports HTML5 as well as this innovative and impressive feature of geolocation detection works smoothly with Chrome, Opera, Firefox and Safari. If you own an iPhone, you can view these things how it happens. The elegant feature of geolocation employs Google maps and JavaScript object – HTML5 and navigator.geolocation. However, it’s not considered as a pure source of HTML5, even its good to hold these thins here.
Furthermore, prior to move ahead let me tell you how does it work? In the case of web-browsers the scripts which sits below used to grab the latitude and longitude position based on the IP address of your system. And in case of mobile devices, it utilizes the advantages of GPS. Thus, might be the location you retrieved on web browser is incorrect, since it is grounded on your IP address.
Now, take a look over this script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=620" />
<title>Bloggermint Demo - HTML5 Geolocation</title>
<link rel="stylesheet" href="http://bloggermint.com/demos/html5geo/files/html5geo.css?d9c344" type="text/css" />
<script src="https://bloggermint.com/demos/html5geo/files/h5utils.js?d9c344"></script></head>
<body>
<section id="wrapper">
<header>
<h1>Geolocation</h1><a href="http://bloggermint.com">(back to post)</a>
</header><meta name="viewport" content="width=620" />
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<article>
<p>Finding your location: <span id="status">checking...</span></p>
</article>
<script>
function success(position) {
var s = document.querySelector('#status');
if (s.className == 'success') {
// not sure why we're hitting this twice in FF, I think it's to do with a cached result coming back
return;
}
s.innerHTML = "found you!";
s.className = 'success';
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcanvas';
mapcanvas.style.height = '400px';
mapcanvas.style.width = '560px';
document.querySelector('article').appendChild(mapcanvas);
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"You are here!"
});
}
function error(msg) {
var s = document.querySelector('#status');
s.innerHTML = typeof msg == 'string' ? msg : "failed";
s.className = 'fail';
// console.log(arguments);
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
error('not supported');
}
</script>
</section>
<script src="https://bloggermint.com/demos/html5geo/files/prettify.packed.js?d9c344"></script>
</body>
</html>
Hence, it is supposed to be quite worthy to have this script which is highly useful to detect the geolocation on web browser through IP address as well on mobile devices through accessing GPS in very simple and easy way without meeting and hindrances towards this direction.
Comments
0 comments