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.