In this video tutorial we’ll show you how to write your first(simple) HTML5 geolocation API application. Basics of Geolocation API is also explained in the notes below, so don’t skip, read and practice it.
Technologies included
Basic HTML5 tags
jQuery – for Javascript
CSS basics
With Geolocation API we can know our position/location on earth by fetching the latitude and longitude information from the browser.
HTML5 File
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
| < !doctype html>
<html>
<head>
<title>Geolocation API: Technotip.com</title>
<meta charset="utf-8"/>
<link href="css/myStyle.css" rel="stylesheet"/>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/myScript.js"></script>
</head>
<body>
<p></p>
</body>
</html> |
< !doctype html>
<html> <head> <title>Geolocation API: Technotip.com</title> <meta charset="utf-8"/> <link href="css/myStyle.css" rel="stylesheet"/> <script src="js/jquery-1.10.1.min.js"></script> <script src="js/myScript.js"></script> </head> <body> <p></p> </body>
</html>
Here we’re making use of HTML5 markup.
Know more: HTML5 – Getting Started Guide
We’re also including a jQuery library file. Make sure to include it before our custom javascript file(myScript.js), as our javascript file depends on jQuery library file.
CSS File
myStyle.css
1
2
3
4
| p{
width: 300px;
height: 300px;
} |
p{
width: 300px;
height: 300px;
}
This is a simple Cascading Stylesheet file, which is allocating 300px width and height to the paragraph tag present in index.html file. It’ll be helpful when we integrate Google Maps into our application( in the future videos ).
Javascript File
myScript.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| $(document).ready(function(){
if( navigator.geolocation )
navigator.geolocation.getCurrentPosition(success);
else
$("p").html("HTML5 Not Supported");
});
function success(position)
{
$("p").html("Latitude: "+position.coords.latitude+
"<br />Longitude: "+position.coords.longitude+
"<br />Accuracy: "+position.coords.accuracy);
} |
$(document).ready(function(){
if( navigator.geolocation ) navigator.geolocation.getCurrentPosition(success);
else $("p").html("HTML5 Not Supported");
});
function success(position)
{
$("p").html("Latitude: "+position.coords.latitude+ "<br />Longitude: "+position.coords.longitude+
"<br />Accuracy: "+position.coords.accuracy);
}
This is a minimalistic approach to using geolocation API. We’ll improve it in future videos.
Once the document is loaded and ready, we check if the browser supports Geolocation API.
We do that by checking if navigator.geolocation object exists.
If it doesn’t exist, we display appropriate message to the user(“HTML5 Not Supported”).
If it does support navigator.geolocation, we’ll make use of it’s methods and get the user location.
navigator.geolocation has 3 methods:
getCurrentPosition
watchPosition
clearWatch
In this video tutorial we’ll be looking at the first method, i.e., getCurrentPosition()
navigator.geolocation.getCurrentPosition(success, error, option);
getCurrentPosition()
It takes 3 parameters:
success handler
error handler
and options.
success handler is mandatory.
error handler and options are optional.
getCurrentPosition method passes the users current location information to the success handler, in the form of position object.
position object: success handler method
position object has two properies: coords and timestamp
coords(coordinates) inturn has 7 properties:
3 are supported by most browsers:
latitude
longitude
accuracy
..other 4 are not widely supported:
altitude
altitudeAccuracy
heading
speed
In this tutorial we’re using latitude, longitude and accuracy properties, as it’s supported by most browsers.
Geolocation API – Success Handler: HTML5
[youtube https://www.youtube.com/watch?v=a3-ekroQoHo]
Note:
1. Geolocation API returns latitude and longitude values in decimal number system.
2. It determines users location by using various factors like: IP Address, GPS, Cell phone triangulation, WiFi etc.
3. We can’t know or specify which method it has to use to determine the users location.
4. If you’re getting 404 or googleapi not found, [object][object] etc error messages, then reload your webpage after you restart your system and/or your WiFi modem.
Make sure your WiFi modem is ON: because it’s one of the way Geolocation API will fetch your location from.
Missing things:
Error handling.
Options, to configure maps output. etc
Showing the location of the user on a MAP.
Showing real time movement of the user on a MAP.
All these will be covered in future videos. Stay Subscribed. Share this video with your friends.
