GMAPS/地図の設置
設置の前に
地図の設置の前にAPI用のレジストリキーの入手はお済みですか？
オフラインで使用する場合は必要ありませんが、WEBで公開することになる場合は、
以下のページからレジストリキーを入手する必要があります。
http://maps.google.com/apis/maps/signup.html
入手したレジストリキーを使って、Googleの提供しているAPIを
ページ内に読み込みましょう。
<script src="http://maps.google.com/maps?file=api&v=2&key=(あなたのレジストリキー)" type="text/javascript"></script>
設置方法
実際に地図を表示したい場所に以下のようにDIV要素を追加します。
<div id="map"></div>
idの「map」の部分には自分の任意のidをつけましょう。これから示すサンプルではidが「map」であることを前提に解説します。
表示矩形のサイズはHTMLタグ上で指定することも、JavaScriptのコード上で指定することもできます。私は外部スタイルシートファイルに以下のように書いています。
#map {width:500px;height:300px;}
幅（width）や高さ（height）は任意のサイズに設定すればよいでしょう。
外部スタイルシートファイルが面倒ならば、HTML上に以下のように書いておきましょう。
<div id="map" style="width:500px;height:300px;"></div>
DIV要素を置いたらその場所に地図を呼び出すコードを追加します。
ページ中DIV要素より下にコードを書けばいいのですが、
私はページ全体の読み込みが終わってから地図を呼び出すために
BODY要素のonloadイベント内にコードを追加しました。
<body onload="load()" onunload="GUnload()">
この場合、onload時に「load」という私の作る関数が呼び出されます。
GUnload関数はGoogle Maps API から提供されているもので、
ページを閉じるときにメモリの無駄遣いを減少してくれる役割を持っています。
onunload時にはこの関数を呼んだ方がいいみたいです。
それでは実際に「load」関数を実装してみます。
function load() {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.6810,139.7672),14);
}
二行で地図が設置できるのもGoogle Maps APIのおかげですね。
GMap2が地図そのもののクラスです。（2はバージョン2だからですね。）先ほど追加したDIV要素「map」のオブジェクトを渡してやると、地図のオブジェクトが作成されますので、それをmapという変数にしまっています。
※もしも変数mapを他の関数でも使用するのであれば、load関数外で宣言しましょう。
次の行では地図に初期表示位置とズームレベルを与えています。
GLatLngは地図上の座標を表すクラスで、緯度と経度を与えると座標オブジェクトが
できます。
地図オブジェクト（map）にsetCenterというメソッドがあり、これに座標オブジェクトとズームレベルの数値（ここでは14）を与えてやると、地図が指定の通りに表示されます。ここで初期表示位置を与えてやらないとスクリプトエラーが出てしまうようですね。
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg" type="text/javascript"></script>
<script type="text/javascript">
function load() {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.6810,139.7672),14);
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width:500px;height:300px"></div>
</body>
</html>
こんな感じでとりあえず地図を設置することができました。