第7回「Google Maps API」(1)

2007.11.15

園田誠（そのだまこと）

　地図というのはどうしてこうも男心をくすぐるんでしょうか。一通り知り合いの家あたりを見終わると，目に付いた道をまっすぐたどってどこまでいくのか見てみたくなります。そして突き当たると，この国道にも起点や終点があったんだなとか変なことに感動してみたり。プログラムなんかしなくてもこれはこれで楽しめるのかもしれま…いや，ちゃんと記事書きます。ごめんなさい。1965年生まれ。愛知県名古屋市出身のフリーライター。

　今回からGoogleが提供するGoogle Maps APIの解説です。Google Maps APIは，前回までにご紹介してきた「Yahoo!地図情報Webサービス」や「Virtual Earth」よりも早くからサービス提供を開始しており，地図系APIの先駆けといえます。サービスとしては先発ながら，機能拡張は現在も続いています。

　公式ドキュメントは，Googleのサイトで参照できます。残念ながら全文英語です。

　Google Maps APIを利用するには，「API Key」と呼ばれるライセンス番号を取得しなければなりません。API Keyは，地図を表示するためのJavaScript内に記述します。

　API Keyの取得には前提条件があります。申請にはGoogleアカウントが必要です。いわゆるGmailアカウントです。Googleアカウントは，Google Maps APIを利用する必須条件なので，お持ちでない方はこちらで取得してください。

　Googleアカウントを取得したら，続いてAPI Keyを取得します。Googleアカウントでログインした後，Google Maps API Signupに進んでください。

　API Keyを申請する際には利用するURLを記述する必要があります。API Keyは申請したURLに対してのみ有効です（図1）。申請ページの説明にも書いてありますが，申請URLを「http://www.ＸＸＸＸ.ne.jp/map/abc.html」のようにHTMLのファイル名まで指定してしまうと，API Keyはそのファイルでしか使えません。複数ページで利用する場合は，「http://www.ＸＸＸＸ.jp/」または「http://www.ＸＸＸＸ.jp/map/」のようにドメイン単位，ないしディレクトリ単位で申請するといいでしょう。

図1●API Key申請時には利用するURLを記述する必要がある

　プロバイダのホームページ・エリアやレンタルのブログを使用している場合は，ドメイン名で取得すると他のユーザーのキーに影響を与えてしまう可能性があります。こういう場合には，必ず自分のディレクトリ名以下で申請してください。

　使用許諾（英語ですが）をよく読み，内容を了承した意志を示すチェックボックスにチェックを入れて，URLを指定して送信ボタンを押すと，API Keyが即時発行されてページ上に表示されます。

図2●使用許諾にチェックを入れ，URLを入力して送信するとAPI Keyが発行される
[画像のクリックで拡大表示]

　発行されるAPI Keyは非常に長いうえに，ブラウザ画面に表示されるだけです。申請フォームにはメールアドレスなどを入力する欄はないので，メールで送られてきたりはしません。画面上のKeyをコピーして，自分でテキスト・ファイルなどに保存しておく必要があります。

　ただし，API Keyの保存には，ちょっとした裏技があります。実は，API Keyを表示しているページのURLには，（フォームの送信内容がGETになっているので）申請したドメイン名がそのまま入っています。

[API Key表示ページの例]
http://www.google.com/maps/api_signup?url=http%3A%2F%2Fxxx.xxx.xx%2F
（xxxの部分は申請したドメイン名です）

　このURLをそのままブックマークしておくと，いつでもAPI Keyを確認できます。また，API Keyの発行ページには，発行されたAPI Keyを埋め込んだ簡単な地図表示ページのサンプルも提示されています（リスト1）。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=キー"
      type="text/javascript"></script>
    <script type="text/javascript">

    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

リスト1●API Key取得時に表示されるサンプル。コード中「キー」と書かれている部分には取得したAPI Keyが入る

　このままコピーしてエディタに貼り付け，map.htmlなどの名前で保存します。

　API Keyの取得時にドメインを明記しているので，申請したURLにアップロードしないと動作しないように思えますが，実際には，サンプルをデスクトップに保存して実行してもちゃんと地図が出ます。デスクトップに保存してダブルクリックなどで開いてみてください（図3）。

図3●地図を表示するだけの簡単なサンプル
[画像のクリックで拡大表示]

　このサンプルは，ちょっとおもしろい特徴を持っています。


<script
  src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=キー"
  type="text/javascript"></script>

　多くの場合，外部のJavaScriptを呼び出す引数は「&」で連結されています。前回まで紹介してきたMicrosoftとYahooの地図サービスは，どちらも&を使っていました。ところが，このサンプルでは「&」ではなく「&」が使われています。

　&はブラウザの上で表示させると&になる“実体参照”と呼ばれる表記法です。結果的にはどちらも&ですが，標準仕様であるRFC，あるいはHTML 4.01のドキュメントには「&と書かず&と書きなさい」とあります。極めて現実的な話をすれば，記述が&または&のどちらでも正しく動作します。しかし，Googleはどうやら規格に厳格な路線を選択しているということのようです。