How to Implement a W3C Geolocation API in Javascript
How to Implement a W3C Geolocation API in Javascript
Using Geolocation API in Javascript is easy for advance Javascript user, but a little bit tricky for those who rarely used ones. Know how here!
In this tutorial I will explained some of the basic. You can use for your own 🙂
W3C Geolocation API
W3C Geolocation API is designed to be used as easy as possible by any developer. Those it is minimizing all things about calling. The language you may used here - since it is web- is JavaScript. If you want to learn some of basic about Javascript, you can refer here.
Getting your location using this GeoLocation API is only calling one function away. However, this function will require another 3 function passed as parameter and for returning a callback. If you never deal with Javascript before, in Javascript, a function result, can be passed through a parameter it's called. e.g. if you ever meet a function like this :
x = getPhoneNumber();
alert(x)
then in JavaScript, sometimes the same thing can be done like this :
getPhoneNumber(alerting);
function alerting(result){
alert(result);
}
In short, in JavaScript, parameter of function is sometimes a function which automatically called. The same thing is done when we deal with Geolocation API in Javascript.
How To Get Our Location?
Geolocation API Can be called using one of two functions, it is getCurrentPosition() and watchPosition(). The first function (getCurrentPosition) called only one times if you want to get the current position. Meanwhile the watchPosition will be called continuously every defined interval. in Short, getCurrentPosition just called one times, and watchPosition will continuously keep watching our position (automatically self updating if our position changed).
Getting our location is simply done by calling the function it self.
an example of using watchPosition is shown below
var watchid = navigator.geolocation.watchPosition(success, error, geo_options);
and using getCurrentPosition is shown below
navigator.geolocation.getCurrentPosition(success, error, geo_options);
did you notice the differences above? getCurrentPosition will return nothing while watchPosition will return an ID in which we can keep this as an ID of our position. we’ll deal with this later. When running, getCurrentPosition will only called once, meanwhile watchPosition will always be called each interval until we closed/clear the watchId (explained later).
How To Use the Function?
Both getCurrentPosition and watchPosition accept three parameters as callback and parameters option. in example above, we have there are three parameter, it is success, error, and geo_options.
First Parameters
As first parameters, is a function which will be called if the program successfully get our position (no matter how the accuracy).
as a parameter of this success function, is a position object, consisted of latitude, longitude, altitude, and accuracy. how to use is shown below
function success(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var altitude = position.coords.altitude;
var accuracy = position.coords.accuracy;
//do something with above position thing e.g. below
alert('I am here! lat:' + latitude +' and long : ' +longitude );
}
You can also, map the latitude an longitude using a google maps. We’ll talk about this later.
Second Parameters
Second parameters dealt with if we can’t get the location information (e.g. GPS is off or internet is down).
we can display any error message here.
function error(error) {
alert("Unable to retrieve your location due to "+error.code + " : " + error.message);
};
Third Parameters
Third parameter is optional. You can use this or not. it depends on you. it is about an option how the position should be configured. The third parameter is not function, but it is more like an object variable. The code is shown below
var geo_options = {
enableHighAccuracy: true,
maximumAge : 30000,
timeout : 27000
};
Conclusion and Full Code
That’s all we needed to get a position using HTML5 / W3C Geolocation API. A full code is shown below. in this code I make a function geoFindMe() and this javascript function simply can be called on your HTML using
....
<body onload="geoFindMe()">
...