XMLファイルから読み込んだマーカー（アイコン）の配列についての検証(２次元配列を理解してみる)

スポンサードリンク

XMLファイルから読み込んだマーカー（アイコン）の配列についての検証(２次元配列を理解してみる)

Posted by 管理人 on 2011年2月6日 Leave a comment (1) Go to comments

＜目次＞始めに地図を読み込んだ時、複数のマーカーから任意の一つのインフォウィンドウ（infowindow）を最初から表示する。

（その1）外部XMLファイルでなく内部ソースにマーカー用の配列を記述する。
（その2）マーカーのインフォウィンドウ（吹き出し）を地図の中心座標に表示させるpanTo（）メソッドを使ったサンプル
（その3）イベントリスナー’dragstart’で、地図をドラッグしたらマーカーのインフォウィンドウ（吹き出し）を閉じて削除する。
（その4）マーカー（アイコン）の配列についての検証(２次元配列を理解してみる)
（その5）XMLファイル（配列）の複数マーカーから特定markerのインフォウィンドウ（infowindow）を最初から一つだけ表示するサンプルデモ完成

◆ Google Maps API v3 / XMLファイルから読み込んだマーカー（アイコン）の配列についての検証

1. 2次元配列

google mapsでたくさんのマーカーを表示させる方法とてfor文が使われていますが、実際はどうなっているのか？

試してみました。

配列を記述したサンプル地図ですが、配列が4列、要素が9行になります。従って、2次元配列で各配列の要素を指定できることになるそうです。

[‘公園1′, 35.760191,140.061629,’kouen’],

[‘公園2′, 35.643033,139.860592,’kouen’],

[‘公園3′, 35.596286,140.141172,’kouen’],

[‘温泉1′, 35.805307,140.16651,’onsen’],

[‘温泉2′,35.717602,139.980167,’onsen’],

[‘温泉3′, 35.42295,139.89739,’onsen’],

[‘水族館1′,36.333294,140.593817,’suizokukan’],

[‘水族館2′, 35.442851,139.644607,’suizokukan’],

[‘水族館3′, 35.728681,139.719765,’suizokukan’]

次のコードでマーカー配列をfor文でまわすと・・・・・・

<script type="text/javascript">
var markers = [
['公園1', 35.760191,140.061629,'kouen'],
['公園2', 35.643033,139.860592,'kouen'],
['公園3', 35.596286,140.141172,'kouen'],
['温泉1', 35.805307,140.16651,'onsen'],
['温泉2',35.717602,139.980167,'onsen'],
['温泉3', 35.42295,139.89739,'onsen'],
['水族館1',36.333294,140.593817,'suizokukan'],
['水族館2', 35.442851,139.644607,'suizokukan'],
['水族館3', 35.728681,139.719765,'suizokukan']
];

for (var i = 0; i < markers.length; i++) 

//for (var i = 0; i < 9; i++)
{

	for (var j = 0; j < 4; j++)
	{
	document.write("[" + i + "][" + j + "] = " + markers[i][j] + "<br />");
	}
}
</script>

表示結果は、次の通りになります。（デモ）

[0][0] = 公園1
[0][1] = 35.760191
[0][2] = 140.061629
[0][3] = kouen
[1][0] = 公園2
[1][1] = 35.643033
[1][2] = 139.860592
[1][3] = kouen
[2][0] = 公園3
[2][1] = 35.596286
[2][2] = 140.141172
[2][3] = kouen
[3][0] = 温泉1
[3][1] = 35.805307
[3][2] = 140.16651
[3][3] = onsen
[4][0] = 温泉2
[4][1] = 35.717602
[4][2] = 139.980167
[4][3] = onsen
[5][0] = 温泉3
[5][1] = 35.42295
[5][2] = 139.89739
[5][3] = onsen
[6][0] = 水族館1
[6][1] = 36.333294
[6][2] = 140.593817
[6][3] = suizokukan
[7][0] = 水族館2
[7][1] = 35.442851
[7][2] = 139.644607
[7][3] = suizokukan
[8][0] = 水族館3
[8][1] = 35.728681
[8][2] = 139.719765
[8][3] = suizokukan

2. 配列からマーカー表示用の要素を取り出す

上記より[i][j]をみますと、配列[i]の要素[0]～[8]を取り出してｇｏｏｇｌｅ mapsへ展開していることがわかります。

では、iの要素だけをfor文で取り出します。

<script type="text/javascript">
var markers = [
['公園1', 35.760191,140.061629,'kouen'],
['公園2', 35.643033,139.860592,'kouen'],
['公園3', 35.596286,140.141172,'kouen'],
['温泉1', 35.805307,140.16651,'onsen'],
['温泉2',35.717602,139.980167,'onsen'],
['温泉3', 35.42295,139.89739,'onsen'],
['水族館1',36.333294,140.593817,'suizokukan'],
['水族館2', 35.442851,139.644607,'suizokukan'],
['水族館3', 35.728681,139.719765,'suizokukan']
];

for (var i = 0; i < markers.length; i++)
{
document.write("[" + i + "] = " + markers[i] + "<br />");
}
</script>

表示結果は、次の通り。（デモ）

[0] = 公園1,35.760191,140.061629,kouen
[1] = 公園2,35.643033,139.860592,kouen
[2] = 公園3,35.596286,140.141172,kouen
[3] = 温泉1,35.805307,140.16651,onsen
[4] = 温泉2,35.717602,139.980167,onsen
[5] = 温泉3,35.42295,139.89739,onsen
[6] = 水族館1,36.333294,140.593817,suizokukan
[7] = 水族館2,35.442851,139.644607,suizokukan
[8] = 水族館3,35.728681,139.719765,suizokukan

以上より、for (var i = 0; i < markers.length; i++) {　}で、marker表示用の要素をとり出していることが判ります。

せっかくですので、ここで試しに、マーカーデータを配列から収得後、地図が表示されるきに一緒にインフォウィンドウも開くようにしてみます。

地図が表示されたときに発生する都合のいいマップイベントprojection_changedがありますので、これを使います。（‘projection_changed’とは？）

これで地図が表示されるとinfoWindow.setContent(html); 、infoWindow.open(map,marker); にイベントをハンドルすることが出来ます。

	google.maps.event.addListener(map, 'projection_changed', function() //◆地図が表示された時
	{
	infoWindow.setContent(html); //◆インフォウィンドウ内に表示するコンテンツをセット
	infoWindow.open(map,marker); //◆インフォウィンドウオープン
	});

その結果は？

配列の最後の要素である8番目の水族館3のインフォウィンドウが、地図の表示時に一緒に開きます。（デモ地図）

3. 配列からマーカー表示用の要素を取り出す

それでは、上記で、例えば6番目の要素である「水族館1」だけを配列からとりだしてみます。

つまり、後述していきますが、取り出した要素のみにinfowindow.openを投げたいと考えました。

6番目の要素を得るには、for (var i = 6; i <= 6; i++) とします。

<script type="text/javascript">
var markers = [
['公園1', 35.760191,140.061629,'kouen'],
['公園2', 35.643033,139.860592,'kouen'],
['公園3', 35.596286,140.141172,'kouen'],
['温泉1', 35.805307,140.16651,'onsen'],
['温泉2',35.717602,139.980167,'onsen'],
['温泉3', 35.42295,139.89739,'onsen'],
['水族館1',36.333294,140.593817,'suizokukan'],
['水族館2', 35.442851,139.644607,'suizokukan'],
['水族館3', 35.728681,139.719765,'suizokukan']
];

for (var i = 6; i <= 6; i++)
{
document.write("[" + i + "] = " + markers[i] + "<br />");
}
</script>

結果は、

[6] = 水族館1,36.333294,140.593817,suizokukan

だけをうまく取り出せました。（デモ）

それでは、地図を表示させたときにインフォウィンドウを最初から開くようにサンプルデモを作成します。

（つづく）