ipinfodb.com Demo (2)

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

by tokkonoPapa

HTML

<h1>ipinfodb.com Demo (2)</h1>

<div>IP Adress :
    <form>
        <input type="text" name="ip" value="175.108.204.0" />
        <input type="button" value="Get Location" onclick="getLocation(this.form.ip.value)" />
    </form>
</div>
<div id="result"></div>
<div id="map"></div>

CSS

#result {
    margin: 1em;
    height: 12em;
    width: 300px;
}
.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

myAjax = {
    handler: [],
    data: [],
    serialize: function (base, data) {
        var query = [];
        for (var key in data) {
            query.push(
                encodeURIComponent(key) + '=' +
                encodeURIComponent(data[key])
            );
        }
        return base + '?' + query.join('&');
    },
    get: function (url, callback) {
        var index = myAjax.handler.length;
        var handler = 'myAjax.handler[' + index + ']';

        // Regist response handler for each request
        myAjax.handler.push(function (response) {
            myAjax.data[index] = response;
        });

        var args = {};
        if (typeof callback !== 'function') {
            args = arguments[1];
            callback = arguments[2];
        }
        args.callback = handler;

        var req = document.createElement('script');
        req.src = myAjax.serialize(url, args);

        // Regist user callback function
        if (callback) {
            req.onload = req.onreadystatechange = function () {
                if (!this.readyState ||
                    this.readyState === "loaded" ||
                    this.readyState === "complete") {
                    this.onreadystatechange = null;
                    callback(myAjax.data[index]);
                }
            };
        }

        document.body.appendChild(req);
    }
};

function getLocation(ip) {
    var result = document.getElementById('result');
    result.innerHTML = '<div class="loading"></div>';

    var precision = 'ip-city';
    var url = '//api.ipinfodb.com/v3/' + precision + '/';
    var settings = {
        key: 'adf0531f133f5110bc8212687ff6017139d190484fc286343b07f4778effaf0b',
        format: 'json',
        ip: ip
    };

    myAjax.get(url, settings, function (response) {
        var str = '';
        for (var key in response) {
            str += response[key] + ';';
        }
        result.innerHTML = str.substr(0, str.length - 1);
    });
}