Home > Ajax, development Tools, Front End Development, Javascript > Get Users Location With JQuery and Ajax

Get Users Location With JQuery and Ajax

September 2nd, 2010


Ever needed to know where your user is from? Ever needed to do it with jQuery / Ajax? Today my friend you are in luck. This article will show you how to get the user’s location using jQuery, Ajax and the users IP.

What are we building?

Our application here isn’t overly complicated. We’re just going to tell our users where they’re from…incase they didn’t know ;)

Download Example

How to do it

We’ll be using a service from ipinfodb.com to get this bad boy off the ground. They offer an api that allows you to pass in an IP and it spits out all the information we need. So all we have to do is tap into this via jQuery and Ajax.

Step 1: Getting the user’s ip address

First thing we need to do is pull in the user’s ip address. We’re just going to use some PHP for this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php

/**
 * Get users IP address.
 *
 * @return string ip address
 */
function visitorIP()
{
    if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])){
        $TheIp=$_SERVER['HTTP_X_FORWARDED_FOR'];
    }else{
        $TheIp=$_SERVER['REMOTE_ADDR'];  
    }

    return trim($TheIp);
}

$ip = visitorIP();


?>

Step 2: The Ajax

Now that we have the users ip, we can use it in ipinfodb’s api. We’ll just use jquery’s ajax to get the information.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Build the URL to query...notice the php ip address at the end.
var url = "http://ipinfodb.com/ip_query2.php?output=json&callback=?&ip=<?php echo $ip ?>";

// Utilize the JQuery's JSON function
$.getJSON(url, function(data){
   
    //Make sure it processed it okay.
    if(data.Locations[0].Status == "OK"){
       
        //Parse the JSON
        var location = data.Locations[0]
        var city = location.City;
        var country = location.CountryName;
        var region = location.RegionName
       
        var output = "Your location is: "+ city+ ", "+region+ " "+ country;
       
        //OUTPUT
        $('body').append(output);
    }
   
});

The magic lies in the GET variables passed with the ipinfodb’s url.

output = json – specifies which format we want…in this case JSON

callback=? – this is for a javascript callback. Since we’re using jquery’s callback we gave this a value of ?. Alternatively you could pass in a javascript function name and it would call the function for you.

ip = (ip address) – is the user’s ip that you want to look up the location.

The JSON it returns will look something like:

1
2
3
4
5
6
7
8
9
10
11
12
{
  "Ip" : "74.125.45.100",
  "Status" : "OK",
  "CountryCode" : "US",
  "CountryName" : "United States",
  "RegionCode" : "06",
  "RegionName" : "California",
  "City" : "Mountain View",
  "ZipPostalCode" : "94043",
  "Latitude" : "37.4192",
  "Longitude" : "-122.057"
}

Notice that it include the latitude and longitude. This is particularly handy with google maps ;)

Hopefully this will help you out. I know I’ve used it numerous times. It’s a simple way to personalize your site. Enjoy.

Download Example
Author:
Categories: Ajax, development Tools, Front End Development, Javascript
Tags: , , ,



Top