This tutorial will walk you through how to leverage jQuery and your browser to get the visitors latitude/longitude location. With those two pieces of information you can deliver content that is local to the end user (local clubs, restaurants or other similar things).

The entire process is quite simple, though it will work on browsers that support location (most phones do... so it will be good for your mobile apps for sure).

The first thing you must do is load jqeruyjQuery.

	<script language="javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

Then you would need to create a div that will show the results (for testing purposes)

	<div id="mylocation"></div>

Next we will write the javascript that will get the users location.

<script language="javascript">
function geoSuccess(e){

   var lat = e.coords.latitude;
   var lon = e.coords.longitude;
   var myLoc = "Latitude: " + lat + '
Longitude: ' + lon;

   $("#mylocation").html(myLoc);
   
}

function geoFailed(e){
   $("#mylocation").html("Failed");
}

window.onload=function(e){
    if ( navigator.geolocation){
       navigator.geolocation.getCurrentPosition(geoSuccess, geoFailed);
    } else {
       // Error (Could not get location)
       $("#mylocation").html("Failed");
    }
}

</script>

To break this down, we have three functions.

1. geoSuccess - This is what will get executed if the browser can get the geolocation of the user.
2. geoFailed - This is what will get triggered if the browser cannot get the users geolocation.
3. widow.onload - This will load when the page is finished loading and is what will actually trigger the request and see if the browser can support it.

One that is loaded on a browser (if your browser supports it) you will get the following request:

If you click "Allow" then the next thing you will see is:

Once you have the latitude and longitude; you can simply query your database and get local... there is a tutorial on that very topic here.

Here is the full code example in case you want to copy/paste it.

<script language="javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script language="javascript">
function geoSuccess(e){
   var lat = e.coords.latitude;
   var lon = e.coords.longitude;
   var myLoc = "Latitude: " + lat + '<br />Longitude: ' + lon;
   $("#mylocation").html(myLoc);
}
function geoFailed(e){
   $("#mylocation").html("Failed");
}
window.onload=function(e){
    if ( navigator.geolocation){
       navigator.geolocation.getCurrentPosition(geoSuccess, geoFailed);
    } else {
       // Error (Could not get location)
       $("#mylocation").html("Failed");
    }
}
</script>
<div id="mylocation"></div>

Questions? Ping me... Pablo