Retrieving external IP address and geolocation of an IP address using JavaScript


Yesterday I was working on a client application which required to read the public address of the client and their geo-location. So after some search I wrote the following html page which gets the current IP as well as retrieves the public location of an IP purely using JavaScript and some external APIs.


<html>
<head>
    <title>Locate an IP</title>
    <script type="text/javascript" src="yqlgeo.js"></script>
    <script type="text/javascript">

        var ipaddress;

        //get location of an IP
        function getIPLocation() {
            document.getElementById('divDetails').innerHTML = '<br />Loading..';
            try {
                var start = new Date();
                var ctrl = document.getElementById('txtIP');
                var ipadd = ctrl.value;
                yqlgeo.get(ipadd, function (o) {
                    var details = '<br /><h3><b>Location Details</b></h3>';
                    details += 'Country Code : <b>' + o.place.country.code + '</b><br />';
                    details += 'Country Name : <b>' + o.place.country.content + '</b><br />';
                    details += 'Country Language : <b>' + o.place.lang + '</b><br />';
                    details += 'Latitude : <b>' + o.place.centroid.latitude + '</b><br />';
                    details += 'Longitude : <b>' + o.place.centroid.longitude + '</b><br />';
                    details += 'Place Name : <b>' + o.place.name + '</b><br />';
                    document.getElementById('divDetails').innerHTML = details;
                });
                var end = new Date();
                var diff = dateDifference(start, end);
                //document.getElementById('divtime').innerHTML = 'Time Elapsed : ' + diff.seconds;
            }
            catch (e) {
                document.getElementById('divDetails').innerHTML = e.Message;
            }
        }

        //get current IP
        function getCurrentIP() {
            var ctrl = document.getElementById('txtCurrentIP');
            if (ctrl) {
                ctrl.value = ipaddress;
            }
            else
                alert('Unable to retrieve IP');
        }

        function getip(json) {
            if (json.ip)
                ipaddress = json.ip;
            else
                alert('Unable to retrieve the IP address');
        }

    </script>
    <script type="text/javascript" src="http://jsonip.appspot.com/?callback=getip"></script>
</head>
<body>
    <form id="frm" action="javascript:getIPLocation()">
    <p>
        Get your IP Address
    </p>
    <input type="text" id="txtCurrentIP" />
    <input type="button" onclick="getCurrentIP()" value="Get IP" />
    <p>
        Type the IP Address
    </p>
    <input type="text" id="txtIP" />
    <input type="button" onclick="getIPLocation()" value="Locate" />
    <br />
    <div id="divDetails">
    </div>
    <br />
    <div id="divtime">
    </div>
    </form>
</body>
</html>

The sample makes use of the YQL Geo Library written by Chris Heilmann which is available here to retrieve the geo-location of an IP. To retrieve the client’s external IP I’ve made use of the API provided by jsoip.appsot.com. Thanks to the SO post here.

Advertisements

5 thoughts on “Retrieving external IP address and geolocation of an IP address using JavaScript

  1. raghuramanv says:

    A good utilitarian piece of code….However,I am not able to get the process flow of the callback url….Could you explain me what happens there actually?

  2. nlvraghavendra says:

    By specifying the callback function name in the URL the ‘jsonip’ service identifies the function that has to be raised after getting the IP details. The services returns the response in the form of JSON (an easy notation for representing complex data in JavaScript) where you can read the IP from the json object as response.ip.

  3. Rodit says:

    Whenever I enter an IP and hit locate, it just returns with ‘undefined’. Does anybody know why this is happening?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s