第3回　Google Mapsでマッシュアップ

ライター　増井雄一郎

2007.07.30

第3回では，複数のWebサービスを使ってWebサイトを構築する「マッシュアップ」を試してみます。ここでは，最も有名なWebサービスであるGoogle Mapsと，最寄り駅を教えてくれるWebサービスを組み合わせたアドレス帳を作ってみます。

　Google MapsやYahoo! Mapsは，地図の情報をWebサービスで提供しています。このWebサービスを用いると，自分のWebサイト上に地図を簡単に張り付けられます。また，天気の情報や駅周辺の情報といった地域の情報を提供しているWebサービスもあります。

　つまり，地図情報と地域情報のWebサービスを組み合わせると，地図の上に天気を表示したり，駅周辺の情報を表示したりといったオリジナルの地域情報サイトが簡単に作れます。これがマッシュアップです。最近は，地域情報を提供するWebサービスが増えています（表1）。

表1●地域情報を提供する主なWebサービス　[画像のクリックで拡大表示]

　ここでは3種類のWebサービスを組み合わせたアドレス帳サイトを作ります。このサイトは，住所と氏名などを入力して，データベースに登録します（写真1）。一見，何の変哲もないアドレス帳ですが，この裏では次の3つのWebサービスが“マッシュアップ”されています。（1）Google Maps，（2）HeartRails Express路線／駅名データサービス，（3）郵便専門ネットWEBサービス――です。

写真1●今回作成するアドレス帳サイト
まだ1件も登録していない。

　ユーザーが郵便番号を入力してカーソルを次の入力エリアに移動した瞬間に，Ajaxで郵便専門ネットWEBサービスにアクセスして，その郵便番号に該当する住所を検索し，自動的に住所を補完入力します。

　さらに，リストにある「表示」ボタンをクリックすると，Google Mapsによる地図が現れ，その地図の上に登録住所がピンで表示されます。HeartRails ExpressのWebサービスを使って，最寄りの駅も地図にマッピングします。

　まず，利用するAPIを紹介しておきます。

■Google Maps

　地図を表示するWebサービスです。JavaScriptで制御することで，ピンを打ったり，吹き出しを出したりできます。図1のように非常に短いコードで詳細な地図を表示させることが可能です。

<script src="http://maps.google.com/maps?file=api&v=1&key
=Google Application ID" type="text/javascrip
t"></script>
<div id="map" style="width: 400px; height: 400px"></div>
<script type="text/javascript">
var map = new GMap（document.getElementById（'map'））;
map.centerAndZoom（new GPoint（139.745417,35.658708） , 0）;
</script>

図1●地図を張り付けるJavaScriptのコード例
Google Application IDのところに，取得したGoogleのキーを入力してこのテキストをブラウザに張り付けることにより，簡単に地図を表示できる。

　このサービスは無料で使えますが，Amazon Webサービスと同じようにユーザー登録が必要です。2006年12月からは，住所から緯度，経度を取得するジオコーディング（後述）も可能になりました。

■HeartRails Express路線／駅名データサービス

　緯度，経度を与えると，最寄りの駅の名称や路線名を教えてくれます。ユーザー登録は不要です。

■郵便専門ネットWEBサービス

　郵便番号を与えると住所を返します。1つの郵便番号から複数の住所が返されることもあります。「XML-RPC」という形式で情報を取り出せます。このサービスもユーザー登録は必要ありません。

　このうち，HeartRails Expressにブラウザからアクセスして，その挙動を試してみましょう。東京タワーの緯度と経度（139.745417, 35.658708）から，最寄りの駅を探してみます。

　ブラウザを開いて，URL欄に次のように入力してみてください。

http://express.heartrails.com/api/json?method
=getStations&x=139.745417&y=35.658708

　そうすると，ブラウザに次のように表示されます。

{"response": {"station": [{"name": "赤羽橋", "postal"
: "1060044", "prefecture": "東京都", "next": "麻布十番", "x"
: 139.744195, "distance": "430m", "line": "都営大江戸線", "prev"
: "大門", "y": 35.654969}, {"name": "神谷町", "postal"
: "1050001", "prefecture": "東京都", "next": "六本木", "x"
: 139.744728, "distance": "440m", "line"
: "東京メトロ日比谷線", "prev": "霞ケ関", "y"
: 35.662623}, {"name": "御成門", "postal"
: "1050004", "prefecture": "東京都", "next": "内幸町", "x"
: 139.751488, "distance": "600m", "line": "都営三田線", "prev"
: "芝公園", "y": 35.660978}]}}

　ここには先ほど指定した東京タワーの座標に近い駅が列挙されています。駅名だけではなく，路線名や緯度経度，郵便番号や都道府県などの情報も提供されています。取り出せる情報の詳細は，HeartRailsのAPIのページに書かれていますので，そちらを参照してください。この情報はJSONと呼ばれる，プログラムで扱いやすい形式で記述されています。今回のRuby on Railsのアプリケーションでは，この情報を取り込んで，地図にマッピングします。

Google Mapsのキーを取得

写真2●Googleのアプリケーション・キーを取得するページ

　Google Mapsを使うためには，Googleにユーザー登録し，アプリケーション・キーを取得する必要があります。

　Google Maps API - Sign Upのページをブラウザで開きます（写真2）。このページには，Google Mapsを使う上での注意事項が書かれています。

・地図の表示回数に制限はないが，1日50万回を超える場合にはGoogleに連絡すること。
・住所から座標に変換するジオコーディングは1日5万回まで。
・エンド・ユーザーが自由にアクセスできるサイトで使用すること。
・現在，地図に広告は含んでいないが，方針を変更する場合には90日前にはブログを通じて告知する。
・マップやロゴの改変をしてはいけない。

　規約を確認し，同意するのであれば，「I have read and agree with the terms and conditions」にチェックを付けた後，「My web site URL:」に「http://自身のIPアドレス:3000/」を入力し，「Generate API Key」を押します。192.168.0.xなどのプライベート・ネットワークに設置する場合にも，そのプライベートIPアドレスを指定します。