1-4：サンプルHTMLコードの基本構成

「１－3：まずは表示してみる」では東京タワー周辺の地図を表示する簡単なプログラムをサンプルとして実際に地図を表示してみました。

そのサンプルには、Google Mapsを使うための基本的な要素が詰まっています。

今回は前回のサンプルプログラムをもとに、Google Mapsの基本について解説します。

東京タワー周辺の地図を表示するGoogle Mapsのコード

Google Maps APIライブラリをインクルード

Google Mapsを利用するには、まずGoogle Mapsの機能が詰まった「ライブラリ」を呼び出す必要があります。

このライブラリを利用することによって、簡単なプログラムを書くだけで地図が表示することができます。

このように、別のところからプログラム内にライブラリなどを取り込むことを「インクルード」といいます。

Google Mapsのライブラリをインクルードしているのは、次の行です。

<script src="…" type="text/javascript"></script>
　　src="･･･"で指定された外部ファイルをJavaScriptのプログラムとしてインクルードします。
　　ここではGoogleのサーバにあるGoogle Maps用のライブラリを取り込んでいます。

http://maps.google.com/maps?file=api&v=2&key=[あなたのAPIキー]
　　GoogleのサーバにGoogle Maps用のJavaScriptライブラリを要求しています。
　　「v=2」の部分は、Google Mapsのバージョン番号です。
　　2006年9月現在で最新のバージョンは「v=2」です。

Google Maps用のライブラリは、Googleのサーバの指定のURLにアクセスすることで、その中身を受け取ることができます。

このようにサーバなどに対して、決められた方法でデータを取得することを「要求する」と言います。

Google Maps用のプログラム

Google Mapsを使って地図を表示するためには、Google Maps用のライブラリに用意されている関数を使ってプログラムを作る必要があります。

Google Maps用のプログラムが書かれている部分は、次の部分です。

<script type="text/javascript">･･･</script>
　　「･･･」の部分はJavaScriptであることを示しています。

//<![CDATA[･･･//]]>
　　XMLの「CDATAセクション」を示しています。
　　ここではXMLについての説明はしませんので、「おまじない」と覚えてください。

function load(){･･･}
　　JavaScriptの関数を定義しています。

if(GBrowserIsCompatible()){･･･}
　　ブラウザがGoogle Mapsを表示できる場合のみ、「･･･」の部分が実行されます。

var map = new GMap2(document.getElementById("map"));
　　「id="map"」がある位置にGoogle Mapsを表示するように指定しています。
　　「new GMap2」という命令を実行するたびに、新しいGoogle Mapsの地図が作成されます。
　　　GMap2(コンテナ)　

map.setCenter(new GLatLng(35.658513,139.745525),20);
　　地図の中心地点を設定しています。
　　new GLatLng(…)は、Google Maps用の座標オブジェクトを作成します。
　　　GLatLng(緯度,経度)　

　　new setCenter(…)は、地図の中心座標と表示倍率を設定します。
　　　setCenter(表示する座標,表示倍率)
　　　表示する座標：GLatLngオブジェクト(GLatLngの戻り値)

　　　表示倍率：0～20
　　　　　　　　数字が大きいほど詳細な地図が表示される

「コンテナ」というのは、「入れ物」です。つまり、コンテナの部分に地図が表示されます。船のコンテナと同じ意味です。

「オブジェクト」というのは、「モノ」を指します。例えば「GLatLng()関数の戻り値は、緯度・経度を表すモノ」です。

とりあえず「そんなモノ」とでも覚えておいてください。

地図の表示

Google Mapsの地図は、コンテナの位置に表示されます。

サンプルのコンテナは、次の行です。


<div id="map">･･･</div>
　　「id="map"」というのは、コンテナのIDです。
　　id="･･･"の「･･･」、document.getElementById("･･･")の「･･･」が一致していれば
　　mapでなくても問題ありません。
　　
　　style="･･･";の部分は、コンテナの大きさを指定しています。
　　この例では、幅(width)=500px,高さ(height)=500pxに指定しています。

<body onload="load()" onunload="GUnload()">
　　このHTMLのページが読み込まれたときに地図を表示し(onload="load()")、
　　ページが閉じられるときにメモリを開放する(onunload="GUnload()")ように指定しています。

投票数:3 平均点:10.00

この記事の1行目に飛ぶ