I wish to point out that if you use http://freegeoip.net/, you don't need to supply to it the IP address of the client's location. Just try these:
1) http://freegeoip.net/xml/
2) http://freegeoip.net/json/
3) http://freegeoip.net/csv/
However, I am unable to retrieve the information with AJAX calls, probably because of some cross-origin policy. Apparently they have not allowed public access to their system.
Try TUQ GEO IP API it's free and really neat and sweet with jsonp support
http://tuq.in/tools/geo
http://tuq.in/tools/geo+stats
You can submit the IP you receive to an online geolocation service, such as http://www.geoplugin.net/json.gp?ip=<your ip here>&jsoncallback=<suitable javascript function in your source>
, then including the source it returns which will run the function you specify in jsoncallback
with the geolocation information.
Alternatively, you may want to look into HTML5's geolocation features -- you can see a demo of it in action here. The advantage of this is that you do not need to make requests to foreign servers, but it may not work on browsers that do not support HTML5.
Just in case you were not able to accomplish the above code, here is a simple way of using it with jquery:
$.getJSON("http://www.geoplugin.net/json.gp?jsoncallback=?",
function (data) {
for (var i in data) {
document.write('data["i"] = ' + i + '<br/>');
}
}
);
$.getJSON('//freegeoip.net/json/?callback=?', function(data) {
console.log(JSON.stringify(data, null, 2));
});
A rather inexpensive option would be to use the ipdata.co API, it's free upto 1500 requests a day.
This answer uses a 'test' API Key that is very limited and only meant for testing a few calls. Signup for your own Free API Key and get up to 1500 requests daily for development.
$.get("https://api.ipdata.co?api-key=test", function (response) {
$("#ip").html("IP: " + response.ip);
$("#city").html(response.city + ", " + response.region);
$("#response").html(JSON.stringify(response, null, 4));
}, "jsonp");
<h1><a href="https://ipdata.co">ipdata.co</a> - IP geolocation API</h1>
<div id="ip"></div>
<div id="city"></div>
<pre id="response"></pre>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
View the Fiddle at https://jsfiddle.net/ipdata/6wtf0q4g/922/