How to get location from ip address in jQuery

The following example will demonstrate to you how to get location from IP address in javascript/jQuery using IP Geolocation API. By using this api you can data in multiple formats such as JSON, XML, etc.

The API base URL is Http://ip-api.com/json/{query}

{query} can be a single IPv4/IPv6 address or a domain name. If you don’t supply a query the current IP address will be used.

- How to get current location in Google Maps using JavaScript

How to get location from IP address in jQuery

By using the following jquery geolocation code snippet you will be able to get country, country code, region, regionName, city, zip, lat, lon, timezone, etc from IP address.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>How to get location from ip address in jQuery</title>
    <script src="jquery-1.10.2.min.js"></script>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }

        th, td {
            padding: 8px;
            text-align: left;
        }
    </style>

    <script type="text/javascript">
        function GetLocation() {
            var ip = $("#txtIp").val();
            var table = ''
            $.getJSON("http://ip-api.com/json/" + ip, function (data) {
                $.each(data, function (key, value) {
                    table += "<tr><td><b>" + key + "</b></td><td><i>" + value + "</i></td></tr>";
                });
                $("#results").html(table);
            });
        }

        $(window).load(function () {
            GetLocation();
        });


    </script>
</head>
<body>
    <h1>Search any IP address/domain</h1>
    <input id="txtIp" type="text" />
    <input type="button" id="btnSearch" onclick="GetLocation();" value="Search" />
    <br />
    <br />
    <table id="results"></table>
</body>
</html>

Download Source Code

Conclusion

I hope you liked this article on how to get location from ip address in jquery. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.