サンプルHTMLコードの基本構成

まずは表示してみるでは東京タワー周辺の地図を表示する簡単なプログラムをサンプルとして実際に地図を表示してみました。そのサンプルには、Google Mapsを使うための基本的な要素が詰まっています。サンプルプログラムをもとに、Google Mapsの基本について解説します。

(まずは表示してみるで作成した地図)

4つの基本構成

サンプルHTMLコードの基本構成

サンプルのHTMLファイルは上図のように4つの構成から成り立っています。

Google Maps APIのライブラリのロード
JavaScriptのコード
window.onloadイベント、window.onunloadイベント
地図を表示するためのDIVタグ

(1)Google Maps APIのライブラリのロード

Googleマップの機能を利用するには、まずGoogleマップを操作するための機能が詰まった「ライブラリ」を読み込む必要があります。ライブラリを利用することによって、簡単なプログラムを書くだけで地図が表示することができます。

ライブラリは、APIを通じて操作を行ないます。 APIは「Application Programming Interface」の略で、アプリケーションをプログラムから操作するためのインタフェースという意味になります。アプリケーションはGoogleマップ、プログラムはJavaScriptのコード、その間を取り持つルールがインタフェースです。

APIの関係図

(1)の　　で囲った部分は、Google Maps APIを読み込んでいます。<script>タグを使って読み込みます。このAPIを読み込むことによって、初めてGoogleマップを操作するための命令が使えるようになります。

(2)JavaScriptのコード

GBrowserIsCompatible()はブラウザ環境でGoogle Maps APIが使えるかどうかをチェックしています。 Google Maps APIが公式にサポートしているブラウザは、以下の通りです。

Internet Explorer 6.0以降 (Windows)
Firefox 2.0以降 (Windows, Mac, Linux)
Safari 3.1 以降 (Mac, iPhone)
Google Chrome (Windows)

new GMap2()は、Google Maps APIを使って地図を表示するための初期化を行ない、操作をするためのインスタンスハンドルを返します。インスタンスハンドルは、車のハンドルと同じです。車が地図で、ハンドルがインスタンスハンドルです。地図に対して何かの操作を行なうときには、このインスタンスハンドルを通して行ないます。コードでは、インスタンスハンドルをmap変数に格納しています。これでmap変数に対して操作を行なうと、地図に結果が表示されるようになります。

map.setCenter()は、緯度経度を指定するとその位置の地図を表示します。同時にズームレベルを設定することができます。


　　GMap2.setCenter(latlng:GLatLng, zoom:Number?)

Google Maps APIでは緯度経度を指定するのに、GLatLng()を使います。


　　GLatLng(緯度, 経度)

緯度経度は世界測地系の座標位置です。

最後に


　　map.setCenter()

が実行されると初めて地図が表示されます。

(3)window.onloadイベント、window.onunloadイベント

何か変化が起こることをイベントと言います。
例えば

ページの読み込みが完了した
別のページに移動した
ページが閉じられた

などです。上記の例で挙げたものは「ページ」に関するイベントです。

イベントにはそれぞれ名前が定義されています。

ページの読み込みが完了した　→ฺ　onloadイベント
別のページに移動した or ページが閉じられた　→ฺ　onunloadイベント

ページに関するイベントはwindowという用意されたオブジェクトに伝えられます。

(3)のコードは、そのwindowオブジェクトにイベントが発生したときに処理を行なうように設定するコードです。


 //windowオブジェクトにonloadイベントが発生したら、load関数を実行する

 GEvent.addDomListener(window, "load", load);



 //windowオブジェクトにonunloadイベントが発生したら、GUnload関数を実行する

 GEvent.addDomListener(window, "unload", GUnload);

このコードによって、次のような動作が行われるようになります。

ページの読み込みが完了したときにload関数が実行されて、地図が表示される
ページが移動するとき or 閉じられるときに、GUnload関数が実行されて、メモリが開放される

(4)地図を表示するためのDIVタグ

何かを入れるためのものを「コンテナ」といいます。船のコンテナと同じです。ここでは<div>タグで幅(width)=500px,高さ(height)=500pxというコンテナを作成しています。コンテナのIDは"map"です。

ここで作成したコンテナは(2)の document.getElementById("map") でプログラムから取得し、GMap2に渡すことで地図が表示されます。