Geolocation for unsupported browsers using geoPosition.js

I got a lot of messages from the readers asking me what to do when you desperately need to get the location of the user even if the user is using a browser like IE7 or BlackBerry's browser.

Now, the native HTML5 Geolocation API comes only with IE9+ and the other advanced browsers. In order to find the user's location for such browsers, we'll use something called 'geoPosition.js'

geoPosition.js makes it possible to do some Geolocaiton for old browsers

View Demo

Why use geoPosition.js for Geolocation?

Well, as I've stated before, geoPosition.js allows us to detect location even if the browser doesn't support geolocation! That's awesome! But there's another side to it as-well. We can't use geoPosition.js as the only method of geolocation in our web apps because geoPosition.js doesn't have advanced features like speed, accuracy, altitude, heading direction etc.

So, I recommend using Modernizr for testing geolocation support, then using native HTML5 geolocation API for geolocation, if that fails, use geoPosition.js, and if that fails too, then you can safely surrender...

Getting geoPosition.js

Well, everyone will ask you to search for geoPosition, then go to the github page of geoPosition.js, copy the code, paste it in some text editor and save it as geoPosition.js.

But if you're like me and you want a CDN hosted version of it, I've done the hard work for you. Here you go!

<script src="<URL>"></script>

and the URL is:

https://raw.githubusercontent.com/estebanav/javascript-mobile-desktop-geolocation/master/js/geoPosition.js

Using geoPosition.js

Before you do anything you'll have to initialize geoPosition. For this, you simply call geoPosition.init() if it succeeds it'll return true and then you can continue, else you can alert out a message saying that geolocation isn't supported.

Once you've initialized your geoPosition. It's really similar to the native API. All you do is call the function geoPosition.getCurrentLocation(success, failure). Where success and failure are function that will be called on success and on failure.

Now the success callback function takes a parameter called 'pos' that contains relevant information like coordinates. Extracting the coordinates from the pos variable is also incredibly similar to the native geolocation api.

function success(pos){
    var lat = pos.coords.latitude;
    var lon = pos.coords.longitude;
}

Sadly,  unlike the native geolocation api, the failure callback function doesn't provide any error message or reason, hence the failure function doesn't take any parameters, all you can do is alert the user that their browser isn't compatible with geolocation even with geoPosition.js.

Putting it all together

Using, everything we've learned thus far in this tutorial, here's a simple geolocation app that solely uses geoPosition.js

// Don't forget to load the geoPosition.js library from the CDN URL

if(geoPosition.init()){
    geoPosition.getCurrentPosition(success, failure);
}

function success(pos){
    var lat = pos.coords.latitude;
    var lon = pos.coords.longitude;
    alert(lat+', '+lon);
}

function failure(){
    alert("We can't determine your location!");
}

Please feel free to check out the demo that I made for you!

View Demo