google mapに複数マーカーを設置する関数

質問

google mapに複数のマーカーとそれに伴う吹き出しを作成しています。
マーカーの数は上下するのですが、大体30～40個くらいが設置される予定です。
ただできるだけjsのソースを少なくしたいと思っているため、ループでまとめて記述できないかと試行錯誤しています。
ちなみに現状は以下のように記述しています。

* * * * * * * * * * * * * * * * * * * * * * * * *
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(座標),
map: map,
title: 'マーカー2'

});
var contentString2 = '吹き出しテキスト';
var infowindow2 = new google.maps.InfoWindow({
position: new google.maps.LatLng(座標),
content: contentString2

});
google.maps.event.addListener(marker2, 'click', function() {
infowindow2.open(map,marker2);
});
* * * * * * * * * * * * * * * * * * * * * * * * *

この「2」の部分を各数字に変えてマーカー分記述していたのですが、
面倒で尚且つソースが非常に多くなるため困っています。

for関数でループさせてみようと思い作成してみたのですが、うまく動作しません。
ちなみに吹き出し内のコメントはすべて違う内容になるため、せめてgoogle.maps.event.addListenerの部分だけでも、と思っています。

javascriptは初心者で、上記のソースも色々調べた上で見よう見まねで作っています。
どなたか効率のよい方法を教えていただけますでしょうか。

よろしくお願い致します。

回答No.2

LancerVII · ベストアンサー

こんにちは。

データは配列で持つことにします。
すると以下のようになります。

// マーカー用の名称
var MAKS = new Array('品川マーカー','お台場マーカー','麻布十番マーカー');
// 吹き出しに表示する内容
var CONS = new Array('品川駅のInfoWindow','お台場があるよと書き出すInfoWindow','麻布十番のInfoWindow');
// 座標(LAT)
var LATS = new Array(35.630152,35.629899,35.654682);
// 座標(LNG)
var LNGS = new Array(139.74044000000004,139.778779,139.73705100000006);

for ( var i = 0; i < CONS.length; i ++ ) {
// CONSの数分のループ処理
var marker1 = new google.maps.Marker ({
// LAT,LNGを取得
position: new google.maps.LatLng(LATS[i],LNGS[i]),
map: map,
// マーカー用の名称をセット
title: MAKS[i]
});
// イベントを登録するマーカーと吹き出し用のコメントを引数として呼び出す
addMarkerEvent ( marker1, CONS[i] );
}

function addMarkerEvent ( marker, contents ) {
var infoWindow = new google.maps.InfoWindow({
content: contents,
maxWidth: 200
});
google.maps.event.addListener ( marker, 'click', function() {
infoWindow.open ( map, marker );
});

}

こんな感じです。どうでしょうか。
配列にはそれぞれの順番でセットします。
上の例ですと1番目が品川関係、2番目がお台場関係、3番目が麻布十番関係となります。

それをforのループで回して一つずつ取り出しながら処理を行います。
marker2とかmarker3とか別々の変数(箱)を用意するのではなくひとつの箱(カラーボックスみたいなもの)から取得するようにするイメージです。
箱の何番目の棚という取得が出来ます。

お礼

できました！感激です。
再度ご丁寧に回答いただき、本当にありがとうございました。
解説していただいたので自分の知識も深まりました。
感謝です。
ありがとうございました。

回答No.1

LancerVII

こんにちは。

どういったデータの集まりであるかわからないので本当に効率が良くなるかわかりませんが、通常は配列という物を使います。

またはこんな感じでも出来ます。

// マーカーを作成しつつEventを登録する
for ( var i = 0; i < 30; i ++ ) {
var marker1 = new google.maps.Marker ({
position: new google.maps.LatLng(座標),
map: map,
title: 'マーカー' + i
});
addMarkerEvent ( marker1 );
}

function addMarkerEvent ( marker ) {
var infoWindow = new google.maps.InfoWindow({
content: marker.title,
maxWidth: 200
});
google.maps.event.addListener ( marker, 'click', function() {
infoWindow.open ( map, marker );
});

}

こうするとそれぞれのマーカーをクリックした時にマーカーに設定された文字がInfoWindowに表示されます。
InfoWindowに表示するものが違うのであればaddMarkerEvent(marker, content)とかにしてcontentに渡す文字列を変更するようにすれば良いと思います。

補足

回答ありがとうございます。
言葉足らずで申し訳ございません。
今回作りたいものは、例えば地図上の各都道府県にマーカーがあり、クリックすると吹き出しに「東京都」とか「北海道」とか出るようなイメージです。
例えばこのページの一番上にある地図のような感じです。
http://betanode.ddo.jp/googlemap/gm2.html

各マーカーと吹き出しごとに座標・コメントが異なります。

教えていただいたやり方で記述してみたのですが、
各吹き出しによって座標とコメントを変える方法がわかりません。
何度も恐縮なのですが、もしご覧になっていたらご回答いただけると大変うれしいです。

よろしくお願い致します！