GoogleのサイトにもThe "Hello, World" of Google Maps V3として解説してありますが、まず地図を表示させるために最低限必要な枠組みについて解説しましょう。任意の地点を中心にしてただ地図を表示するだけのサンプルですが、すべてはここから始まります。あとは必要に応じて付け加えていけばよいわけです。
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initMap() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(34.685334, 135.832742),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapdiv"), mapOptions);
}
</script>
</head>
<body onload="initMap()">
<div id="mapdiv" style="width: 100%; height: 100%"></div>
</body>
</html>
まずheadブロックのmeta name="viewport"というタグですが、これはiPhoneなどの携帯端末でアクセスする際に地図を常に画面いっぱいに表示させるための「おまじない」です。とりあえずこれはそのまま入れておけばOKです。
そして次のAPIを読み込むためのscriptタグですが、V2とは違ってAPIキーは必要ありません。もっともこれは現在試験中のためで、正式運用になった際には必要になるのかもしれません。?以降にあるsensorというパラメータはtrueまたはfalseのいずれかを指定しなければなりません。これはGPS機能付きの携帯電話など自分の位置を捕捉できる場合はtrueを指定し、その他一般のPC向けにはfalseを指定します。
それに続くscriptタグが地図を表示するためのJavaScriptの本体部分です。ここではinitMapという一つの関数を定義し、bodyタグのonloadイベントで読み込みと同時に実行されるようにしています。
地図を表示するためには、まず地図を入れるためのコンテナを指定します。これはV2と同じで、divタグでボックス領域を指定し、id属性で適当な名前を付けます。ここでは"mapdiv"としておきます。
そして地図そのものを表すクラスMapのコンストラクタを呼び出してオブジェクトを生成してやればよいわけですが、V2とちょっと違うのはクラス名の前には必ず"google.maps."という修飾子を付けなければならない点です。Javaではおなじみですが、これは名前空間と呼ばれるもので、他人が作ったクラスと混同されないようにユニーク性を保証するためのものです。少し面倒なような気もしますが、これはこれで洗練されているといえるでしょう。
Mapクラスのコンストラクタは2つの引数をとり、第1引数には地図を表示するボックスのDOMオブジェクトを指定します。これはV2と同じくgetElementByIdで先ほど指定したid="mapdiv"のDOMを取ってやればOKです。そして第2引数には地図の初期状態を決めるためのオプションを指定します。ここでは中心座標とズームレベル、それに初期マップタイプを指定しますが、その他にもさまざまなオプションを指定可能です。
オプションを指定するにはJSONと呼ばれる形式でプロパティ名とその値を指定します。これは{}の中にカンマで区切っていくつでも列挙することができ、それぞれ「プロパティ名: 値」という形になります。ここではズームレベルを15とし、中心座標を(34.685334, 135.832742)としています。なお緯度経度を表すオブジェクトはLatLngクラスのコンストラクタを呼び出すことにより生成しますが、もちろんここでも名前空間を付けなければなりません。そして次のmapTypeIdというプロパティは初期マップタイプを指定するもので、ここではMapTypeIdクラスの定数として定義されているROADMAPを指定しています。これは普通の道路地図という意味です。もしSATELLITEを指定したならば航空写真になります。
とりあえずこれだけ書けば地図を表示させることが可能ですので、中心座標をいろいろ変えながらサンプルプログラムで確認してみて下さい。