使ってみよう! Bing API/SDK

第13回使ってみよう! Bing Maps AJAX Control─⁠─地図をWebページに貼り付け(1)

新しいBing Maps

2010年11月、Bing Mapsがリニューアルされました。これに伴い、開発者向けのBing Maps AJAX ControlがVersion 6.3からVersion 7.0へメジャーアップデートされています。今回からはこの新しいBing Maps AJAX Controlを使ってみましょう。

まず、新しいBing Mapsの変更点をみてみましょう。図1のようにデザインの変更が行われています。変更された点は、地図上のダッシュボードと呼ばれる地図表示の切り替えやズームを行うUI部分および、左側のリンクなどのレイアウトです。1クリックで知りたい情報にアクセスできるよう改良されています。ただし、日本語の場合はダッシュボードなど一部のみ変更が反映されています。また、見た目の変更として、道路地図のデザインも変更されています。

図1 Bing Maps
図1 Bing Maps

これまでは、新しい機能とUIを備えたBing MapsとしてSilverlight版が提供されていましたが、今回の変更によりAjaxを利用したBing Mapsに戻っています。Silverlight版でのみ提供されていたMap AppやStreetSideについては、今回のAjax版Bing Mapsからアクセスできるようになっています。Silverlightが使用されていることには変わりありませんが、今後Silverlightで実現している機能はHTML5などへの置き換えが予想されます。今回の変更は、Bing Mapsの今後の展開を示すものといえるでしょう。

また、廃止された機能もあります。ActiveXによる3D表示機能図2は、サービス終了が予定されています。

図2 Bing Maps 3D
図2 Bing Maps 3D

Silverlight版とAjax版を実際に使用して比べると、ズームや表示の切り替え、アプリケーションなどSilverlight版が優れている点はいくつもありますが、HTML5対応などを見据えて今回の変更になったことが伺えます。今後もアップデートが続くと思われますので動向に注目していましょう。以前のSilverlight版は、今のところhttp://www.bing.com/maps/exploreにアクセスすると利用可能です。

Bing Maps AJAX Control 7.0

Bing Maps AJAX Controlは、Webページ用の地図コントロールおよびAPIで、JavaScriptのライブラリーとして提供されています。このコントロールは古くから提供されており、以前のものは⁠Virtual Earth Map Control⁠と検索すると見つかると思います。使ってみよう! Windows Live SDK/API第4回でも紹介しています。Virtual Earthとは、Bingブランド以前に使用されていた地図サービスを提供するプラットフォーム名です。

Version 6.3から7.0への変更点について、見た目の違いは図3、4を見てわかるとおり、

  • ダッシュボードの変更 および
  • 道路地図のタイル画像の変更

があります。デザインについては新しいBing Mapsで既に述べたとおりです。

図3 Bing Maps AJAX Control 7.0
図3 Bing Maps AJAX Control 7.0
図4 Bing Maps AJAX Control 6.3
図4 Bing Maps AJAX Control 6.3

さらに次の変更も行われています。

  • パフォーマンスの改善(3倍高速に、ダウンロードサイズは1/3に)
  • Bird’s eye(概観図)図5の改善
  • iPhoneのWebブラウザーサポート
図5 Bird’s eye(概観図)
図5 Bird’s eye(概観図)

そして開発者視点での大きな変更として、ライブラリーのクラスの構成や、クラスのメソッドやプロパティが刷新され、下位バージョンとの互換性がなくなっています。クラスの命名規則が変わり、以前のバージョンではVirtual Earthを表すVEという接頭辞が多用されていましたが、7.0では使用されていません。また、以前のバージョンでは、地名から経緯度を得るジオコーディングを行うAPIなどもAJAX Controlに含み、地図サービスの全部入りとなっていましたが、7.0では地図の表示のみに限定し、ジオコーディングなどはBing Maps REST Servicesと連携しての使用を想定されており、AJAX Control自体はシンプルな構成になっています。Bing Maps REST Servicesについては第9から11回で紹介しています。

Webページに地図を貼る

さて、さっそくWebページにBing Maps AJAX Controlを使用して地図を貼り付けてみましょう。HTMLファイルを作成し、次のように記述して保存し、Webブラウザーで確認します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Sample</title>
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&amp;mkt=ja-jp"></script>
    <script type="text/javascript">
 
        function GetMap() {
            var options = {
                credentials: "BingMapsKey",
                mapTypeId: Microsoft.Maps.MapTypeId.road,
                center: new Microsoft.Maps.Location(45.5, -122.5),
                zoom: 6}
 
            var map = new Microsoft.Maps.Map(document.getElementById("map"), options);
            var center = map.getCenter();
            var pin = new Microsoft.Maps.Pushpin(center, { text: 'あ' });
            map.entities.push(pin);
 
        }
    </script>
</head>
<body onload="GetMap();">
    <div id='map' style="position: relative; width: 400px; height: 400px"></div>
</body>
</html>

結果は図6のようになります。この時点で、マウスでの一通り操作ができ、オンラインの地図として機能します。とてもシンプルなので、説明がなくともある程度内容がわかるかと思いますが、今回はここまでの内容を順に説明します。

図6 地図の表示
図6 地図の表示

Bing Maps Keyの作成

Bing Maps AJAX Controlを使用するにあたり、Bing Maps Keyという文字列を作成する必要があります。Bing Maps SDK/APIの利用には共通の事項で、この連載でも何度か出てきた内容です。

Bing Maps Keyの作成には、Bing Maps Account Center図7にアクセスします。開発者アカウントを作成し、続いてBing Map Keyを作成してください。

図7 Maps Account Center――Bing Maps Keyの作成
図7 Maps Account Center――Bing Maps Keyの作成

このBing Maps Keyによって認証を行い、またユーザーのアクセス解析にも利用できます。解析のレポートはBing Maps Account Centerの「View my Bing Maps API usage」より確認できます。

作成したBing Maps Keyは先ほどのファイルのコード中、BingMapsKeyと記述している部分と置き換えておきましょう。

地図の表示

作成したHTMLファイルの内容を順に説明します。先頭にDOCTYPE宣言を記述します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTMLファイルの文字セットはUTF-8が推奨されています。ファイルはUTF-8エンコードで保存するようにしましょう。headタグ内には、metaタグを使用してcharset属性を指定します。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Bing Maps AJAX Controlは次のようにscriptタグを使用してJavaScriptのライブラリーとしてロードします。

<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&amp;mkt=ja-jp"></script>

地図の表示する場所は、bodyタグ内にdivタグを記述し、そこに地図を表示させるようにします。各種Webブラウザーで正しく表示するため、下記のように直接またはCSSファイルにて、div要素の幅と高さを指定しておくことが推奨されています。

<div id='map' style="position: relative; width: 400px; height: 400px"></div>

次にJavaScriptのコード部分です。Webページの読み込み完了後に地図を表示するコードを実行します。具体的には、Mapクラスを生成して行います。生成時に表示するdiv要素とBing Maps Key、各種オプションの指定を行います。

function GetMap() {
    // MapOptins, ViewOptions
    var options = {
        credentials: "AlTbyg8jCqAh-7bSGqCuYtC0S8hPUzPerImBnMeleIbj2z_4h9JaOnoO4BOiPam7",
        mapTypeId: Microsoft.Maps.MapTypeId.road,
        center: new Microsoft.Maps.Location(45.5, -122.5),
        zoom: 6}

    // Map オブジェクトの作成
    var map = new Microsoft.Maps.Map(document.getElementById("map"), options);
}

オプションは、キーと値のペアです。上記コードでは、credentials、mapTypeId、center、zoomがオプションのキー名です。指定できるオプションはMapOptionsViewOptionsという名前でSDKでは分類されています。

各オプションの内容は次の通りです。

オプション 説明
credentials Bing Maps Key
mapTypeId 地図の種類
MapTypeId列挙体を指定します。
  • aerial:航空写真
  • auto:自動選択
  • birdseye:概観図
  • road:道路地図
など
center 表示する地図の中心の経緯度
Locationオブジェクトを指定
zoom ズームレベル

上記以外にもいろいろな指定が可能ですが、今後の連載で必要に応じて紹介します。

以上が、地図の表示となります。先ほどのコードではプッシュピンの追加も行っています。プッシュピンを地図に追加するは、Pushpinクラスを生成し、Mapクラスのentitiesコレクションに追加します。コードは次の通りです。

// 表示されている地図の中心の経緯度(Locationオブジェクト)を取得
var center = map.getCenter();
// Pushpin オブジェクトの作成
var pin = new Microsoft.Maps.Pushpin(center, { text: 'あ' });
// プッシュピンの追加
map.entities.push(pin);

今回はここまでです。地図上にプッシュピンなどを表示する方法は次回以降にも紹介します。

おすすめ記事

記事・ニュース一覧