Web上で地図を表示するツールの定番といえば「Googleマップ」。独自の地図を簡単に作れる「Google Maps API」を使って、会社案内のページに地図を埋め込んだり、地図と連動するネットサービスを運営している方も多いでしょう。
このGoogle Maps APIの新バージョン「Version 3」（以下V3と略）が5月27日に公開されました。今回は、V3を使って地図を表示する基本的な手順を紹介しましょう。
Google Maps API V3の主な変更点
Google Maps API V3では、以下の点が新しくなりました。
- （1）API Keyが不要
- V2まででは、Google Maps APIを使うためにはAPI Keyを取得する必要がありましたが、V3では不要になりました。
- （2）iPhone／Androidへの対応
- iPhoneやAndroidで地図を高速に表示できるように機能が追加されました。
- （3）JavaScriptの書き方の変更
- V2とV3では、地図を表示するためのJavaScriptの書き方がかなり変わっています。
Webサイト制作者やサイト運営者にとってうれしいのは、（1）のAPI Keyが不要になった点でしょう。これまでURLごとにAPI Keyの発行を申請する必要がありましたが、それが不要になったことでより手軽にGoogle Maps APIを使えるようになりました。
基本的な地図を表示してみる
V3を使って基本的な地図を表示する手順を紹介しましょう。
●V3の組み込み
HTMLのヘッダー部分に以下の行を追加し、Google Maps API V3のライブラリを組み込みます。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=trueまたはfalse">
最後の sensor= の部分には、位置検知センサー（GPSなど）がある機器では true、それ以外では falseを指定します。iPhone用の地図を表示するなら、sensor=true とすれば良いでしょう。一方、一般的なパソコン用の地図なら、sensor=false とします。
●div要素の追加
次に、ページのHTMLの中に、地図を表示するための div要素を追加します。div要素にはID属性を設定し、スタイルシートのwidthとheightで地図のサイズを指定します。
たとえば、ID属性を「map_canvas」にし、800×600ピクセルの地図を表示するなら以下のように書きます。
<div id="map_canvas" style="width : 800px; height : 600px;"></div>
