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.

Debugging Javascript?

Well this may be an obselete stuff. But i still find guys who are unaware of this Visual Studio 2005 functionality.

How many times have you got frustrated seeing a javascript error dialog in your browser while developing web applications? Have you ever tried to debug the client-side script? Is it really possible? The fact is, it is completely possible to debug the javascript code.

By making some changes in the VS2005 settings, it is possible to enable the IDE to debug the Javascript. This saves our valuable time to catch the bugs easily and to perform modifications, rather going through the whole code to get hold of the bug.

You can very well set breakpoints and do the same attach-to-process debugging with those scripts. Infact you can debug other client side scripts too, not only javascript. No need to bang your head against the monitor anymore! 🙂

Here is the MSDN link explaining the whole procedure – Debugging Client Scripts in VS2005.

Happy coding! 🙂

My original post – here