スポンサードリンク

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


<目次>始めに地図を読み込んだ時、複数のマーカーから任意の一つのインフォウィンドウ(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]を取り出してgoogle 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

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

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

つづく

◆ Google Maps API v3 イベントリスナー’dragend’で、地図をドラッグしたらマーカーのインフォウィンドウ(吹き出し)を閉じて削除するサンプルデモ

◆ 参照先

◆Google Maps JavaScript API V3

スポンサードリンク

Related Posts

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">