読者です 読者をやめる 読者になる 読者になる

google map に現在地の標高を表示するグリモンを作った

LatLng2Height::緯度経度から標高算出API
こちらのAPIに感化されて作ってみました。


そもそも↑のサイト様ですでに実装できているものだけど、勉強の意味もこめてグリモン化
あと、jsonpを使ってみたかった。


こんな感じに標高を表示してくれます


※インストールはこちらからどうぞ!

ソース

// ==UserScript==
// @name          height with google map
// @namespace     http://ryoff.com/
// @include       http://maps.google.*
// ==/UserScript==

(function() {
    //初期設定
    document.getElementById('map').addEventListener("mousemove", check_trigger, false);
    var point = "";
    var nowLoading = 0;
    var liEle = document.createElement("li");
    liEle.setAttribute("id","heightViewErea");
    liEle.style.position = "relative";
    liEle.style.top = "1px";
    document.getElementById('links').firstChild.insertBefore(liEle, document.getElementById('links').firstChild.firstChild);

    function check_trigger() {
        if (nowLoading == 1) {
            return false;
        }
        if (document.getElementById('link').href.match(/\&ll\=([0-9\.]+,[0-9\.]+)/)) {
            var nowPoint = RegExp.$1;
            if (point == nowPoint) {
                return false;
            }
            else {
                nowLoading = 1;
                point = nowPoint;
                document.getElementById("heightViewErea").innerHTML = " loading... ";
                get_height_by_api(nowPoint);
            }
        }
    }
    function get_height_by_api(nowPoint) {
        var url = "http://lab.uribou.net/ll2h/?ll=" + nowPoint + "&jsonp=view_height";
        GM_xmlhttpRequest({method: "GET", url: url, onload: function(res) {
            eval('(' + res.responseText + ')');
        }});
    }
    function view_height(api_json) {
        if (api_json["error"] == 0) {
            height2html(api_json["height"]);
        }
        termination();
    }
    function height2html(height) {
        document.getElementById("heightViewErea").innerHTML = height + " M ";
    }
    function termination() {
        nowLoading = 0;
        return false;
    }
})();


う〜ん。
APIjsonpを利用する場合、call_back 関数をして出来るらしいんだけど、グリモンでGM_xmlhttpRequestを使用しても、call_back関数を指定できるので、どっちを使えばいいのか分からなかった。


結局、GM_xmlhttpRequestで受け取ったものを eval() してすぐに API の引数で指定した call back 関数に投げて、function termination() 内で return false するという苦肉の策。


う〜む。
jsonpに関してはもっと勉強したい。