![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
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で質問しましょう!
似たような質問が見つかりました
- その他(プログラミング・Web制作) google formsを使ったタスク依頼フォーム作成におけるご相談 1 2023/06/22 15:55
- JavaScript Google reCAPTCHAについて 1 2023/02/22 14:37
- JavaScript gasについて 1 2022/05/31 21:51
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- その他(プログラミング・Web制作) ワードプレスのプラグインであるAddQuicktagを使いたいが… 3 2022/04/18 15:03
- Google Maps google map経路検索で、進行方向とmapの向きを一致させたい 3 2022/04/10 14:20
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- Google Maps iOS でのgoogle map の地図を写真で表示する方法を教えて下さい。 Windows でgo 2 2023/06/02 09:56
- Android(アンドロイド) スマホでGoogle Mapを快適に使うためのセンサー 1 2022/04/12 11:19
- Google Maps Google mapの印刷 1 2022/10/12 21:32
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ホワイトボードに水性顔料マー...
-
デジタル時計の時刻合わせの方...
-
マイページはどこを開くの
-
【Ping(ピング)】Windows10で...
-
ウインドウを毎回同じ位置、大...
-
一定時間おきにアラームやポッ...
-
スクリプトって、何ですか?ど...
-
VBE画面の縦のスクロールバ...
-
5ちゃんねる
-
エクセル 枠の中に小さい枠
-
エクセルVBAでフォームのListbo...
-
PL/Iについて、教えてください。
-
Excelでワードアートや図を常に...
-
【Android】ユーザー補助機能ボ...
-
エクセル2007のリボンにアドイ...
-
Youtubeが勝手に右下に勝手に小...
-
Javascript_submit()完了後に処...
-
エクセルのシート上に別のシー...
-
タスクバーに非表示
-
リンク時、親ウインドウを最前...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Yahoo地図でマーカーを表示した...
-
WordのVBAについて
-
VBAでオブジェクトがありません...
-
【javascript】住所から郵便番...
-
グーグルマップのリンクについて
-
aspのセレクトボックスにDBのデ...
-
Google マップにマーカーと同心...
-
ホームページビルダー16 地図...
-
JavaScriptでGoogleMAPの表示を...
-
GoogleMapお店の情報をJSONで取...
-
Yahoo地図で郵便番号からおおよ...
-
Google Maps API v2 現在位置か...
-
既存のgoogleマップに半径表示...
-
google mapに複数マーカーを設...
-
グーグルマップAPI+MySQLを使...
-
ホワイトボードに水性顔料マー...
-
Google Map ルート
-
グーグルマップV3のマーカー表...
-
map = new google.maps.Mapで作...
-
グーグルマップ(Googlemap)を...
おすすめ情報