Google Maps API でMapの出力2 --API記述方法｜アジャスト接待ウェブログ　アジャピー

Google Maps API でMapの出力2 --API記述方法

Google Maps APIの記述方法
Google Mapsは特別なプログラムをインストールすることなく、htmlにJavaScriptでMapの動作スクリプト記述するだけで利用することができます。簡単なソースをもとに実際にGoogle Mapsを表示してみます。まずはソース記述上のポイントをまとめておきます。

Google Maps APIのソースは3つのパートから構成される
Google Maps APIは「Google Maps APIのインクルード部分」、「Map生成部分」「Map動作スクリプト部分」の3つのパートから構成されます。この内「Google Maps APIのインクルード部分」は1つのファイルで1回記述すればよくいので、<head></head>内部に記述したりします。「Map生成部分」「Map動作スクリプト部分」はMapをいくつ配置するかに応じて、組み合わせて記述します。「Map生成部分」はもちろん<body></body>内に配置しますが、「Map動作スクリプト部分」は外部ファイル、内部、「Map生成部分」の前後等どこにでも配置できます。

Google Maps APIのインクルード部分の記述方法
ここではAPIのバージョンとAPI Keyを指定します。バージョンについては特に理由がない限りバージョン2を指定します。

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAg4JKyTvPrr_jssE1b7GdwhTVN3yJ3SQVWopsLG42Xrho1-3HchQ8xWD4bO_dpJeettrChtRaFKwMbA" type="text/javascript"></script>
Map生成部分の記述方法
<div>タグを利用し、Google Mapsの表示エリアを指定します。ここでは後に説明する「Map動作スクリプト部分」の記述に対応したidの属性値と表示エリアをwidth, heightで指定します。

<div id="map" style="width: 400px; height: 300px">

Map動作スクリプト部分の記述方法
Google Mapsの表示や動作方法をGoogle Maps APIの仕様に準じてJavaScriptにて記述します。XHTMLではスクリプト要素をCデータ内部に記述する必要があるため、scriptタグの内のスクリプトをCDATA section内部に配置します。

スクリプトの起動と終了
　スクリプト[loadMap]の起動部分については、bodyタグ内に[onload="loadMap()"]と記述しての起動や、本ページのように、Cデータ内部に[window.onload=loadMap();]と記述して起動します。
　ブラウザによっては次のページに移動した場合、イベント設定などがメモリ内に残ったままになってしまうことがあります。このメモリリークを防ぐために、次のページに移動しようとしたときにGUnload()を実行するようにします。bodyタグ内に[onunload="GUnload()"]としての終了や、本ページのように、Cデータ内部に[window.onunload = GUnload();]と記述して終了します。

//bodyタグ内に記述する場合
<body onload="loadMap()" onunload="GUnload()">

//Cデータ内に記述する場合
<script type="text/javascript">
//<![CDATA[
window.onload=loadMap();
function loadMap()
{
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.691490, 139.709336), 13);
}
window.onunload = GUnload();
//]]>
</script>

Google Maps APIのバージョン1とバージョン2の違い
Google Maps APIにはバージョン1とバージョン2の大きく2つのバージョンが存在します。今後サポートの対象からバージョン1がはずれる様なので、特別な理由がない限りバージョン2で記述すべきでしょう。バージョンの指定はGoogle Maps APIのインクルード部分で行います。誰かのスクリプトを参考にしている場合まずこの部分を確認します。詳しくは「Google Maps APIバージョン１とバージョン２の相違点」を参照。バージョンの違いによる記述の相違点をまとめます。

Google Maps APIのインクルード部分
ここでAPIのバージョンの指定を行います。

//バージョン1
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIA..." type="text/javascript"></script>
//バージョン2
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIA..." type="text/javascript"></script>

マップ生成のクラスGMapの記述
マップ生成のクラスはバージョン1ではGMap、バージョン2ではGMap2を利用します。GMap2にはsetCenter()メソッドが追加されました。バージョン1でのcenterAndZoom()、setMapType()（中心座標、ズームレベル、地図タイプの指定）がsetCenter()1つで行えます。また座標の指定方法がバージョン1のGPoint(x, y) からGLatLng(y, x)になりました。x は緯度、y は経度でこれが逆転しているのに注意。最後にズームレベルですが、バージョン1では0がもっとも拡大率が高く、バージョン2では0がもっとも拡大率が低くなりました。要するにバージョン2では詳細な地図ほど高い数値を利用することでより詳細な地図にも対応できるようになったということでしょう。

//バージョン1
  var map = new GMap(document.getElementById("map"));
  map.centerAndZoom(new GPoint(139.709336, 35.691490), 4);
//バージョン2
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(35.691490, 139.709336), 13);