ipinfodb.com Demo

http://stackoverflow.com/questions/18425746/get-the-geolocation-from-ip-with-ipinfodb

by tokkonoPapa

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<h1>ipinfodb.com Demo</h1>

<div>IP Adress :
    <input id="ip" type="text" value="175.108.204.0" />
    <input id="submit" type="button" value="Get Location" />
</div>
<div id="result"></div>
<div id="map"></div>

CSS

#result {
    margin: 1em;
    height: 12em;
    width: 300px;
    white-space: pre;
    font-family: monospace;
}
.loading {
    padding: 20px;
    background-size: 16px 16px;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url("data:image/gif;base64,R0lGODlhEAAQAPIGAAAAAMLCwkJCQpKSkmJiYoKCgv///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJCgAGACwAAAAAEAAQAAADM2i63P4wyklrC0IEKgAQnAdOmGYFBLExwboQWcG2rlHEwTDQLUsUOd2mBxkUCgNKa+dIAAAh+QQJCgAGACwAAAIACgAOAAADLWgWIqHQCABEVLPe1R4MBOFFRFNsRUNsYDFewTC8iixvQ1EMyxjEvyBLODQkAAAh+QQJCgAGACwAAAAACgAOAAADLWi6IRJrCQCECoU0ag1xxeBARuEQ0UUU5DUM7fK+qTEUYR0EcM3Ev51uB7wAEwAh+QQJCgAGACwAAAAADgAKAAADLWi6URQrLiJEkSaM0eqrkLFtAVEEAgAIylAUQ5SuSqCFNZjhWG3zmB8wOJQkAAAh+QQJCgAGACwCAAAADgAKAAADK2hqMRMrLuekCnCU8gqBDCZ2glBcYkSUxIJJgQdaUVDOtAAAAr3oPN/llgAAIfkECQoABgAsBgAAAAoADgAAAytoEdauiz0Yx5BQFTvN2EMXWNgUFETZFIJQdERLiGgZtKohAIDQ7T0RrpEAACH5BAkKAAYALAYAAgAKAA4AAAMqaKoR+609Fie1K4zhZiibNRSg1XAQUXQPIQgE835voQgAIARqh+ummSUBACH5BAUKAAYALAIABgAOAAoAAAMsaLpsES2+F9mEddEgBFbBMGACAAiMOCrlGRBFWBQD2L0dYYjfUuQZEKynSAAAOw==");
}

JavaScript

function getLocFromIP(ip, callback) {
    var settings = {
        key: 'adf0531f133f5110bc8212687ff6017139d190484fc286343b07f4778effaf0b',
        format: 'json', // raw, xml, json
        ip: 'null'
    };
    var precision = 'ip-city'; //'ip-country';
    var url = '//api.ipinfodb.com/v3/' + precision + '/';
    settings.ip = ip;

    $.ajax(url, {
        type: 'GET',
        data: settings,
        // Possible 'dataType': xml, html, text, script, json, jsonp
        // Here must be 'jsonp' becase ipinfodb doesn't support CORS
        dataType: 'jsonp'
    }).done(function (data, textStatus, jqXHR) {
        callback(data);
    }).fail(function (jqXHR, textStatus, errorThrown) {
        callback(textStatus);
    });
}

$('#submit').on('click', function () {
    var result = $('#result').empty().addClass('loading');

    getLocFromIP($('#ip').val(), function (data) {
        result.removeClass('loading')
            .append('<p>' + JSON.stringify(data, null, 4) + '</p>');
    });
});