Bing Maps を任意のWebサイトで使う方法

mapWeb サイトに地図を付けるとき、これまでもっぱら Google Maps を使っていましたが、
Bing Maps を付けた案件で、いろいろ勉強になったので注意点を記しておこうと思います。

Bing Maps キー生成の手順と注意点

Bing Maps を任意のWebサイトに使う場合、Bing Maps キーが必要で、そのキーの生成に Bing Maps アカウントが必要です。

アカウント作成とキーの生成手順は以下の通り。

  1. Bing Maps Account Centerより、Bing Maps アカウントを作成します。Bing Maps アカウント(=Microsoft アカウント)になっているので、Microsoft アカウントを持っている人は、Microsoft アカウントでサインインします。持っていない場合は新規作成します。
  2. アカウントを作成したら、サインインして Bing Maps のキーを生成します。左側メニューの Create or view keys より、Bing Maps のキーを作成するのですが、My keys の下に書いてある文章に注意が必要です。

    You are able to create two keys (Trial or Basic) for most application types and one additional Windows Store app Trial key under this account. Trial keys expire after 90 days and cannot be converted to Basic keys. You cannot delete keys or generate more than 3 keys from this account. If you intend to create a non-trial application, make one of the keys a Basic key and read the governing TOU that defines usage limits.

    意訳)

    このアカウントのもとで、2つのキー(トライアルまたはベーシック)ほとんどのアプリケーションのタイプと1つ追加の Windows ストアアプリのトライアルキーを作成することができます。トライアルキーは、90日後に有効期限が切れると基本キーに変換することはできません。あなたはキーを削除したり、このアカウントから3つ以上のキーを生成することはできません。非トライアルアプリケーションを作成する場合は、基本的なキーを作成し、使用制限の利用規約をお読みください。

    上記文の太字の箇所を箇条書きにすると

    • トライアルキーは90日後に有効期限が切れて、基本キーに変換することはできない。
    • 作ったキーは削除できない。
    • アカウントから3つ以上のキーは生成できない。

    つまり、トライアルキーで Bing Maps キーを3つ生成してしまうと、そのアカウントでキーを生成できなくなり、公開Webサイト(本番環境)で利用できなくなってしまいます。

    アカウントでキーを生成できなくなってしまった場合は、Account issues のメールアドレスへメールで問い合わせするようです。

    私はテスト環境の URL でトライアルキーを1つ作ってしまったので、後から知って失敗したなと思いました。本番環境の URL で Basic Key で作っておくべきでした。

  3. キーを生成したら、そのキーを使って、コードを記述して Bing Maps を利用できます。

英語ですが以下の利用規約も目を通して置いたほうがいいでしょう。(自分は途中で挫折しました((+_+)))

Bing Maps キーの種類

キーの種類は3つあります。

  • Trial Key
  • Basic Key
  • Enterprise Key

Trial Key と Basic Key について意訳した要件を記しておくと

  • Trial Key
    • 任意の30日間で最大10,000の課金対象トランザクションは無償で利用できる。
    • 90日後に有効期限が切れる。
  • Basic Key
    • 公開ウェブサイトで制限なく利用できる。
    • 公開ウェブサイト:任意の12ヶ月の期間内に最大125,000累積課金対象トランザクションを、無償で利用できる
    • モバイルおよび Windows ストアアプリ:任意の24時間の期間内に最大50,000累積課金対象トランザクションを無償で利用できる。

詳しくは以下を参考

*トランザクションとはデータの処理のこと。この場合だと、Web サイトに Bing Maps が読み込まれて表示されること。

トランザクションを超えた場合どうなるの?

Basic Key を使っていてトランザクションの上限を超えた場合、「どうなるんだ? Microsoft から請求書が送られてくるのか?」という疑問が湧いてきます。以下の MSDN Bing Maps forums でそのことが議論されています。

意訳で回答を読み取ると

前もってトランザクションを見積もって、超える場合は、エンタープライズライセンスが必要なのでライセンスチームに連絡してください。

また、過剰に使用状況がある場合は、ライセンスチームからエンタープライズキーにするように連絡することがあり、連絡が取れない場合はアカウントを無効にすることがあります。ですので、Bing Maps のポータル内の有効な連絡先の詳細を持っていることを確認してください。

とのことです。

Microsoft から請求書が送られてくる事はなさそうです。(たぶん…Microsoft の人に会う機会があれば確認したい事項です。)

Bing Maps を 任意の Web サイトに表示する

キーがー生成できたら、そのキーを使って Bing Maps を表示します。

以下のサンプルコードは、東京スカイツリーの座標位置にプッシュピンを表示します。

function getMap () {

  // 東京スカイツリーの座標位置を取得
  var latlng = new Microsoft.Maps.Location(35.8269888, 139.91565160000005);

  var mapOptions = {
    credentials: '取得した API Key を入力',  // Bing Maps API Key
    center: latlng,                       // 東京スカイツリー座標位置
    zoom: 16,                             // ズーム
    width: 500,                           // 地図の幅
    height: 500,                          // 地図の高さ
    mapTypeId: Microsoft.Maps.MapTypeId.road
  };

  // map オブジェクト生成
  var map = new Microsoft.Maps.Map(document.getElementById('map'), mapOptions);

  // pushpin オブジェクト生成
  var pushpin = new Microsoft.Maps.Pushpin(map.getCenter());

  // 地図へプッシュピンを追加
  map.entities.push(pushpin);

}

マウスホイールで地図が拡大縮小してしまうのを無効にする

Bing Map 上にマウスカーソルを置いた状態で、マウスホイールを使うと地図が拡大縮小してしまうのを無効にしたい場合は、以下のコードを追記することで無効にすることができます。

  // マウスホイールを無効にする
  Microsoft.Maps.Events.addHandler(map, 'mousewheel', function(e) {
    if(e.targetType == 'map'){
      e.handled = true;
    }
  });

今回、Bing Maps API キーの種類について調べたり、英語のドキュメントを訳したりと結構な時間を費やしました。Bing Maps API は公式ドキュメントが英語なので利用する場合、私のような英語がわからない開発者に取ってネックになりそうだなと思いました。