Geolocation is an interesting feature deployed by numerous mobile applications. It allows an application to find the location of mobile/device. And based on the location the application can provide various services or advertisements.
Geolocation in HTML5?
HTML5 allows one to use to geolocation services quite easily and within few minutes one should be able to see something working.
lets see an example of how to use the geo location in HTML5.
One needs to use the geolocation object exposed by the navigator in-order to utilize its services. The geolocation object has 2 methods which provide the location information.
1) getCurrentPosition : to be used when the location information is required just once.
2) watchPosition : to be used when one needs to monitor or track the location periodically.
Both the methods have identical signatures. The arguments for each of the functions is as below,
a) Arg1 (Mandatory) : call back function, which will be called when the function call suceeds
b) Arg2 (Optional) : call back function, which will be called when the function call fails
c) Arg3 (Optional) : PositionOptions object
The following code will show a button and on clicking the button the virtual globe should be visible. In Firefox one would see the info bar and a message box prompting the user to accept the location information.
Paste the following code in the <body> of an html file.
<p>
<button onclick="GetMap()">Show map</button>
</p>
<div id="mapDiv" style="position: relative; width: 800px; height: 600px;"></div>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script>
var map = null;
function GetMap() {
/* Replace YOUR_BING_MAPS_KEY with your own credentials.
Obtain a key by signing up for a developer account at
http://www.microsoft.com/maps/developers/ */
var cred = "<Your BING KEY>";
// Initialize map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{ credentials: cred });
// Check if browser supports geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(locateSuccess, locateFail);
}
else {
alert('I\'m sorry, but Geolocation is not supported in your current browser.');
}
}
// Successful geolocation
function locateSuccess(loc) {
// Set the user's location
var userLocation = new Microsoft.Maps.Location(loc.coords.latitude, loc.coords.longitude);
// do your operations
}
// Unsuccessful geolocation
function locateFail(geoPositionError) {
switch (geoPositionError.code) {
case 0: // UNKNOWN_ERROR
alert('An unknown error occurred, sorry');
break;
case 1: // PERMISSION_DENIED
alert('Permission to use Geolocation was denied');
break;
case 2: // POSITION_UNAVAILABLE
alert('Couldn\'t find you...');
break;
case 3: // TIMEOUT
alert('The Geolocation request took too long and timed out');
break;
default:
}
}
</script>
That's it. Plain and simple to get location information in HTML5.
Geolocation in HTML5?
HTML5 allows one to use to geolocation services quite easily and within few minutes one should be able to see something working.
lets see an example of how to use the geo location in HTML5.
One needs to use the geolocation object exposed by the navigator in-order to utilize its services. The geolocation object has 2 methods which provide the location information.
1) getCurrentPosition : to be used when the location information is required just once.
2) watchPosition : to be used when one needs to monitor or track the location periodically.
Both the methods have identical signatures. The arguments for each of the functions is as below,
a) Arg1 (Mandatory) : call back function, which will be called when the function call suceeds
b) Arg2 (Optional) : call back function, which will be called when the function call fails
c) Arg3 (Optional) : PositionOptions object
The following code will show a button and on clicking the button the virtual globe should be visible. In Firefox one would see the info bar and a message box prompting the user to accept the location information.
Paste the following code in the <body> of an html file.
<p>
<button onclick="GetMap()">Show map</button>
</p>
<div id="mapDiv" style="position: relative; width: 800px; height: 600px;"></div>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script>
var map = null;
function GetMap() {
/* Replace YOUR_BING_MAPS_KEY with your own credentials.
Obtain a key by signing up for a developer account at
http://www.microsoft.com/maps/developers/ */
var cred = "<Your BING KEY>";
// Initialize map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{ credentials: cred });
// Check if browser supports geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(locateSuccess, locateFail);
}
else {
alert('I\'m sorry, but Geolocation is not supported in your current browser.');
}
}
// Successful geolocation
function locateSuccess(loc) {
// Set the user's location
var userLocation = new Microsoft.Maps.Location(loc.coords.latitude, loc.coords.longitude);
// do your operations
}
// Unsuccessful geolocation
function locateFail(geoPositionError) {
switch (geoPositionError.code) {
case 0: // UNKNOWN_ERROR
alert('An unknown error occurred, sorry');
break;
case 1: // PERMISSION_DENIED
alert('Permission to use Geolocation was denied');
break;
case 2: // POSITION_UNAVAILABLE
alert('Couldn\'t find you...');
break;
case 3: // TIMEOUT
alert('The Geolocation request took too long and timed out');
break;
default:
}
}
</script>
That's it. Plain and simple to get location information in HTML5.
