使ってみよう! Bing API/SDK

第18回 使ってみよう! Bing Maps AJAX Control──Geolocation APIの利用

この記事を読むのに必要な時間:およそ 6 分

はじめに

2月10日,Internet Explorer 9 製品候補版が公開されました。この製品候補版では位置情報を取得するGeolocation APIの利用が可能になっています。今回はGeolocation APIとBing Maps AJAX Controlを連携してみましょう。また,Bing Maps AJAX Controlについては今回で一旦終了です。

Geolocation API は,Internet Explorer 9以外の主要なWebブラウザーでも利用できます。Geolocation APIや位置情報に関する内容は,gihyo.jp内に位置情報サービスのはじめ方という連載もありますので,こちらも参考になるかと思います。

余談ですが,Wi-FiのアクセスポイントやIPアドレスから位置情報を取得するサービスは,BingブランドではなくMSN Virtual Earthという名前で地図サービスが提供されていた2005年から提供されていました。一時期まではそのサービスを,Bing Mapsの前のバージョンにあたるLive Searchs Mapsで利用できていましたが,現在では終了しています。

Geolocation API

Geolocation APIは,W3Cで勧告候補の仕様で,このAPIを利用するとスクリプトから位置情報が取得できますGeolocation API Specification)⁠Geolocation APIで定義されているGeolocationオブジェクトには次のメソッドがあります。

  • getCurrentPosition:現在の位置情報を取得
  • watchPosition:定期的に位置情報を取得
  • clearWatch:定期的な位置情報の取得を終了

この中のgetCurrentPosition メソッドを使ってみましょう。JavaScriptで現在位置を取得する場合は,次のように記述します。

// 現在の位置情報を取得
window.navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

function successCallback(position) {
    // 取得に成功した場合,経緯度を表示
    alert("Location: " + position.coords.latitude + ", " + position.coords.longitude);
}

function errorCallback(error) {
    // 取得に失敗した場合,エラーコードを表示
    alert("Error code: " + error.code);
}

取得に成功した場合,getCurrentPositionメソッドの第1引数に指定した関数にPositionオブジェクトが渡されます。経緯度は,PositionオブジェクトのcoordsプロパティCoordinatesオブジェクト)からさらに,latitudelongitudeプロパティから得ます。ここでは説明しませんが,このような呼出し以外にも,キャッシュされた位置情報の許容時間の指定なども可能です。

現在位置の表示

それでは,Bing Maps AJAX Controlで現在位置を表示してみましょう。まず,地図を表示するコードはこれまでと同じように次のようになります。jQueryのライブラリーの参照など,後ほど使用するためコードも一部含まれています。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Bing Maps Sample</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&amp;ssl=1"></script>
    <script type="text/javascript">
        <!--
        var map = null;
        var bingMapsKey = "BingMapsKey";
        var position = null;

        function GetMap() {
            map = new Microsoft.Maps.Map(document.getElementById("map"), {credentials: bingMapsKey});
        }
        //-->
    </script>
</head>
<body onload="GetMap();">
    <div id="map" style="position: relative; width: 512px; height: 512px"></div>
    <div id="share"></div>
</body>
</html>

位置情報の取得に成功した場合,その地点にプッシュピンを追加するコードを追記しましょう。まず,<body>要素に現在位置の取得処理を呼び出すボタンを追加します。

<input type="button" value="Locate Me!" onclick="locateMe();" />

続いてJavaScriptのコードです。次のコードは現在位置の取得の要求部分です。

function locateMe() {
    if (window.navigator != null && 
        window.navigator.geolocation != null) {
        window.navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
    } else {
        alert("Geolocation not supported");
    }
}

現在位置の取得に成功した場合は,次のように記述します。Geolocation APIとの連携部分は,PositionオブジェクトからBing Maps AJAX ControlのLocationオブジェクトに変換するだけですので,特に難しいところはありませんね。

function successCallback(p)
{
    position = p;

    // Position オブジェクトから Location オブジェクト作成
    var loc = new Microsoft.Maps.Location(p.coords.latitude, p.coords.longitude);

    // 地図上の Entity オブジェクト削除
    map.entities.clear();

    // プッシュピンの表示
    var pin = new Microsoft.Maps.Pushpin(loc);
    map.entities.push(pin);
    
    // 結果の場所へ移動
    map.setView({center: loc, zoom: 12});
}

最後に,取得に失敗した場合です。関数に渡されるPositionErrorオブジェクトには次の3種類のエラー内容が定義されています。

function errorCallback(error) {
    var message = "";

    switch (error.code) {
        case error.PERMISSION_DENIED:
            // 位置情報へのアクセスをユーザーが拒否した
            message = "Permission denied";
            break;
        case error.POSITION_UNAVAILABLE:
            // 位置を特定できなかった
            message = "Position unavailable";
            break;
        case error.TIMEOUT:
            // 取得が許容時間内に完了しなかった
            message = "timeout";
            break;
    }
    alert(message);
}

以上で,現在位置を取得して地図上にプッシュピンを表示するところまでできました。実際に実行して確認してみてください。Internet Explorer 9では,図1のように通知バーが表示されます。許可すると位置情報が利用できる場合,その地点にプッシュピンが表示されます。

図1 位置情報取得の要求

図1 位置情報取得の要求

著者プロフィール

松江祐輔(まつえゆうすけ)

日本システムウエア株式会社 勤務。現在,ハードウェア設計・検証業務を担当。大学生・大学院生時代はベンチャー企業 有限会社ミレニアムシステムズにプログラマーとして従事。趣味はプログラミング。好きな言語はVisual Basic。Microsoft MVP for Windows Live Platform(Jul 2010 - Jun 2011),Windows Live(Jul 2011 - Jun 2013)。

URL:http://katamari.jp

コメント

コメントの記入