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ベストアンサー
- 回答日時:
こんにちは。
データは配列で持つことにします。
すると以下のようになります。
// マーカー用の名称
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
- 回答日時:
こんにちは。
どういったデータの集まりであるかわからないので本当に効率が良くなるかわかりませんが、通常は配列という物を使います。
またはこんな感じでも出来ます。
// マーカーを作成しつつ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
各マーカーと吹き出しごとに座標・コメントが異なります。
教えていただいたやり方で記述してみたのですが、
各吹き出しによって座標とコメントを変える方法がわかりません。
何度も恐縮なのですが、もしご覧になっていたらご回答いただけると大変うれしいです。
よろしくお願い致します!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
iPhoneサイトにgooglemapを掲載...
-
googleMapでアイコンを変更する...
-
googleマップAPIクリックイベント
-
WordのVBAについて
-
デジタル時計の時刻合わせの方...
-
エクセルのシート上に別のシー...
-
マイページはどこを開くの
-
Javascript_submit()完了後に処...
-
小さな表示窓の呼び方は
-
スクリプトって、何ですか?ど...
-
一定時間おきにアラームやポッ...
-
ウインドウを毎回同じ位置、大...
-
エクセルVBAでフォームのListbo...
-
PDFを(htmlのように)無限に縦...
-
vb,netでtextboxの文字を右から...
-
Excelでワードアートや図を常に...
-
同じページをブラウザで複数開...
-
Outlookでこのような表示がされ...
-
ページ訪問時にiframe内を自動...
-
別フォームから戻ったときのイ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
どうして+3
-
Yahoo地図でマーカーを表示した...
-
VBAでオブジェクトがありません...
-
【javascript】住所から郵便番...
-
WordのVBAについて
-
ホームページビルダー16 地図...
-
ビルダーの黄色マーカーの出し方
-
既存のgoogleマップに半径表示...
-
googlemapで複数条件絞り込みで...
-
逆ジオコーディングについて
-
google map の画面サイズを小さ...
-
map = new google.maps.Mapで作...
-
iPhoneサイトにgooglemapを掲載...
-
Google Maps API v2 現在位置か...
-
GoogleMap のマーカーに数値を...
-
GoogleMapsでルート表示
-
GMap Api V3で中心マーカーを表...
-
ワードプレスのプラグインであ...
-
Dreamweaver CS3で、太い赤字と...
-
アイフォンの位置を検索する
おすすめ情報