Geolocation API を使った現在地の取得 - Google Map API 利用

html5 JavaScript

Geolocation API と Google Map API を使って現在地の位置情報と住所を取得するサンプルを作成してみた。なお、動作確認は Firefox 3.6.3 を使用し、localhost の Web サーバーを使って実施した。

Geolocation API を使って現在地を取得するには navigator.geolocation.getCurrentPosition() に位置情報の取得結果を引数に取る関数を渡すだけと非常に簡単。

また、Googel Map API を使って位置情報から住所を取得（逆ジオコーディング）するには google.maps.ClientGeocoder の getLocations を使用する。

geo_sample.html
<html>
<head>
<title>Geolocation API を使った現在地の取得サンプル</title>
<!-- localhost 用のキー使用 -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAnfs7bKE82qgb3Zc2YyS-oBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSySz_REpPq-4WZA27OwgbtyR3VcA"></script>
<script type="text/javascript">
    google.load("maps", "2.x");

    function initialize() {
        if (navigator.geolocation) {
            //Geolocation API を使った現在地の取得
            navigator.geolocation.getCurrentPosition(showPosition, handleError);
        }
    }

    //現在地の位置情報を表示する
    function showPosition(position) {
        document.getElementById("location").innerHTML = "(" + position.coords.latitude + ", " + position.coords.longitude + ")";

        showAddress(position.coords.latitude, position.coords.longitude);
    }

    function handleError(error) {
        document.getElementById("location").innerHTML = error.message;
    }

    //住所を表示する
    function showAddress(latitude, longitude) {
        try {
            var gclient = new google.maps.ClientGeocoder();
            var pos = new google.maps.LatLng(latitude, longitude);

            //Google Map API を使って住所を取得
            gclient.getLocations(pos, function(response) {
                if (response && response.Status.code == 200) {
                    document.getElementById("address").innerHTML = response.Placemark[0].address;
                }
            });
        }
        catch (e) {
            alert(e.message);
        }
    }

    google.setOnLoadCallback(initialize);
</script>
</head>
<body onunload="GUnload()">
<h1>現在地</h1>
<div id="location"></div>
<div id="address"></div>
</body>
</html>

ソースは http://github.com/fits/try_samples/tree/master/html5/geolocation/