1. ホーム
  2. Blog
  3. HTML5 Geolocation API で緯度経度を取得→地図を表示してみた

HTML5 Geolocation API で緯度経度を取得→地図を表示してみた

川崎 有亮

川崎 有亮

技術

川崎です。もう GW も終わり。
JavaScript で HTML5 の Geolocation API を使って緯度経度を取得して、
現在地付近の地図を Google Maps Static API で表示してみました。
要は、以下のようなシンプルなコードです。

    function run() {
        navigator.geolocation.getCurrentPosition(callback);
    }
 
    function callback(position) {
        lat = position.coords.latitude
        lng = position.coords.longitude;
        var src = 'http://maps.google.com/staticmap?center=' + lat + ',' + lng
                + '&zoom=14&size=400x300&markers=' + lat + ',' + lng;
        var img = $('<img/>').attr('src', src).appendTo('#here');
    }

試すのは コチラから。

geo-screenshot.png

各ブラウザで表示させた結果は以下の通り。

Chrome 5 + Mac OS X 10.6.3 = OK
Firefox 3.5.9 + Mac OS X 10.6.3 = OK
Safari 5 + Mac OS X 10.6.3 = N/A
IE 8 + Windows XP = N/A
(5/6 追記)Safari + iPhone OS 3.1.3 = OK

ブラウザごとに or タイミングによって?緯度経度の精度が違う気がします。
まだどの環境でも使える状態にはなっていないですが、これだけ簡単に緯度経度が
取得できるなら、「プラスα」の機能として、組み込んでおいて損はないですね。

プライバシー

なお、JavaScript でいつでも緯度経度が取得できるわけではありません。
Chrome では、以下のような確認画面がブラウザに表示されます。

geo-chrome.png

Firefox では、以下のようなメッセージになります。

geo-firefox.png

(5/6 追記)
Google Maps の API キーを付けていなかったからか、エラーになっていたので、修正。

トップへ戻る