• ベストアンサー

Google Mapで複数マーカーの情報ウィンドウ

Google Mapで複数（多数）のマーカーの情報ウィンドウを切り替えたいです。 2個の場合はうまくいきました。 http://weed777.sakura.ne.jp/wordpress/?p=107 原理としては同じコードなのですが、7個に増やすとうまくいきません。 http://weed777.sakura.ne.jp/wordpress/?p=122 どうぞよろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.3

2個と7個の場合のコードの違いは、ループで処理しているのとそうでないのの違いですね。 （2個の場合はダイレクトにinfo[1]などだけれど、7個ではインデックスが変数） イベント処理の関数内にループのインデックスが含まれていますが、バインドされる時には関数内の変数は評価されず、実行時に値が評価されます。 （バインドのループ内では「i」は順にインクリメントされていますが、実行時には「i」の値は不定です。（大抵は8） 試しに、バインドする関数を 　google.maps.event.addListener(marker[i], 'click', function(){ alert(i); }); のようにしてみればわかると思います。（どのマーカーをクリックしても「8」が表示される） それなので、変数iの値を固定して関数に引き渡しておく必要があります。 わかりやすく、別の関数を定義して 　google.maps.event.addListener(marker[i], 'click', showInfo(i) ); 　function showInfo(index){ 　　return function(){ 　　　var i=0; 　　　while(info[i]) info[i++].close(); 　　　info[index].open(map,marker[index]); 　　} 　} のようにすれば、意図通り動作するかと思います。 ＊関数showInfoはループの外でinitialize内に定義してください。 　（initialize外だと、今度はinfo[]、marker[]の参照ができなくなります。） 　　↑原因はこれと同様に、関数のスコープと変数の値の評価のタイミングにあるので、そのあたりを調べてみるとわかるかと思います。 　匿名関数で記述することも可能ですので、試してみてください。

rodanT
質問者

お礼

原因から丁寧に教えて頂いて、 本当にありがとうございました。 とても勉強になりました。 http://weed777.sakura.ne.jp/wordpress/?p=141

その他の回答 (2)

回答No.2

Firebugでチェックしてみたら、 info[i]が未定義ってエラーが出たよ。

画像を拡大する
rodanT
質問者

お礼

教えて頂いて、ありがとうございます。 「イベント処理の関数内にループのインデックスが含まれていますが、バインドされる時には関数内の変数は評価されず、実行時に値が評価されます。」というのが真相でした。 でもfirebugを使うとこんなことも分かるんですね。 勉強になりました！

回答No.1

いや、できてるねぇ。

画像を拡大する
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • WordPressのページにGoogle Map

    http://weed777.sakura.ne.jp/wordpress/?p=5 WordPressのページにGoogle Mapを埋め込もうとしたのですが、まったく何も表示されません。 原因を教えていただければと思います。

  • googleマップの情報ウィンドウ

    googleマップについてお伺いさせていただきます。宜しくお願いします。 googleマップの情報ウィンドウにopenInfoWindowHtml()を使用しているのですが、マーカーをクリックして情報ウィンドウを表示したときに表示する情報のテキストや画像が情報ウィンドウからはみ出すことがあります。これをふせぐにはどうすればよろしいでしょうか？ 申し訳ありませんが、どうぞ宜しくお願いいたします。

  • google mapのマーカーについて

    オブジェクトに関わる質問があります。 今ある地図上に複数のマーカーを表示させて地図をクリックすると、ズームされた子ウィンドウが出てきます。 そして、子ウィンドウではマーカーをドラッグする事が可能になっており、親ウィンドウから子ウィンドウへの情報の受け渡しはできたのですが、移動させたマーカーの新しい緯度、経度の情報を更新させて親ウィンドウに引き渡す作業で手間取っております。 それぞれのマーカーはオブジェクになっており、まだオブジェクトの理解が足りないので、もしわかる方がいましたらお願いします。 以下のコードを使ってます // creating a map var map = new GMap2(document.getElementById("map")); var pointsets = [40.9, -74.2, 41.3, -73.8, 41.1, -74.1, 40.9, -74.18, 41.29, -73.79]; var sets = pointsets.split(","); var markerpoints = new Array(sets.length/2); for(var i=0; i<sets.length/2; i++) { markerpoints[i] = new GLatLng(sets[2*i], sets[2*i+1]); } for(var i=0; i<sets.length/2; i++) { map.addOverlay(makeMarker(markerpoints[i])); } function makeMarker(point){ var marker = new GMarker(point, {draggable:true, autoPan:false, bouncy:true}); return marker; } 以上のコードを使うと、マップ上に複数のマーカーが表示されて、それぞれのマーカーはドラッグ可能になります。 移動させたマーカーの新しい情報を更新させていくには、イベントを使えばと思っているのですが、効率のよいやり方はありますでしょうか？ お手数ですが、よろしくお願いします

  • Google Map （外部から情報ウィンドウ開く

    Google Maps API v3　において「地図外のHTMLから地図内の情報ウィンドウを開く」ということをやろうとしているのですが、どうにもうまくいきません。 下記コードにおいて、地図外にある「あいうえお商店」や「かきくけこ不動産」をクリックした際、地図内に情報ウィンドウが開くようにするためにはどのようにすればよいでしょうか。 すでに丸3日間悩んでおり、私の力ではどうにもならないと判断したため、皆さまのお力をお借りすることにしました。大変恐れ入りますが、貧弱な知識の私にどうか知恵を与えてやって下さい。どうぞよろしくお願い致します。 深みにはまって抜け出せないコードは以下の通りです。 ---------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>test</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var currentInfoWindow = null; //最後に開いた情報ウィンドウを記憶 function initialize() { var latlng = new google.maps.LatLng(35.67105, 139.743624); var opts = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), opts); // ***************１件目のデータ*************** var m_latlng1 = new google.maps.LatLng(35.675224, 139.737914); var marker1 = new google.maps.Marker({position: m_latlng1,map: map,icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|3CFFF8|000000',title: '港区赤坂3-3-3' }); var contentString1= '</p>あいうえお商店</p></div>'; var infowindow1 = new google.maps.InfoWindow({content: contentString1 }); // ***************１件目のデータ*************** // ***************２件目のデータ*************** var m_latlng2 = new google.maps.LatLng(35.670772, 139.733875); var marker2 = new google.maps.Marker({position: m_latlng2,map: map,icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|3CFFF8|000000',title: '港区赤坂5-5-5' }); var contentString2= '</p>かきくけこ不動産</p></div>'; var infowindow2 = new google.maps.InfoWindow({content: contentString2 }); // ***************２件目のデータ*************** google.maps.event.addListener(marker1 , 'click', function() { if (currentInfoWindow) { currentInfoWindow.close(); } infowindow1.open(map,marker1); currentInfoWindow = infowindow1; }); google.maps.event.addListener(marker2 , 'click', function() { if (currentInfoWindow) { currentInfoWindow.close(); } infowindow2.open(map,marker2); currentInfoWindow = infowindow2; }); } function myclick(idx) { google.maps.event.trigger(marker[idx],'click'); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width: 700px; height: 500px"></div> 1　<a href="javascript:myclick(0)">あいうえお商店</a></p> 2　<a href="javascript:myclick(1)">かきくけこ不動産</a></p> </body> </html> ---------------------------------------------------------------- 大変恐れ入りますが、どうぞよろしくお願い致します。

  • 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は初心者で、上記のソースも色々調べた上で見よう見まねで作っています。 どなたか効率のよい方法を教えていただけますでしょうか。 よろしくお願い致します。

  • Google Map のマーカーを表示させない方法

    なんらかの地名でGoogle Map を検索した結果、そのキーワードに関連する複数のスポットがマーカー（おたまじゃくし）で汚されてしまいますが、はっきり言って邪魔です。 マーカーをさっくり非表示にする方法はないでしょうか？

  • グーグルマップの吹出しは複数可能？

    グーグルマップを自分のサイトに設置しようとしています。 マーカーをクリックすると吹き出しが出ますが 他のマーカーをクリックすると吹出しが消えて２つ表示ができません。 吹出しでなくてもいいのですが 吹出し見たいのを複数常時表示することはできますか？ お忙しいところ是非教えていただければと思います。 よろしくお願いします。

  • googleマップにajax

    googleマップにajax、php、mysqlを使って複数マーカを表示したい場合 googleマップの地図をマウスで動かすごとにmysqlのSqlを実行しデータ を抽出してgoogleマップに表示しているのでしょうか。

    • ベストアンサー
    • AJAX
  • グーグルマップ v3で複数の住所からピンを立てたい

    現在、googlemap v3で複数の住所からそれぞれのピンを立てたいと 考えております。 下記コードにて実行しましたが、住所とウィンドーの中身が ずれて表示されてしまい困っております。 例）東京にピンが立っているがウィンドーの中身が広島など どなたかご教授ください。 よろしくお願いいたします。 -----js------ var data = new Array(); data.push({position:'東京都',content:'東京都'}); data.push({position:'広島県',content:'<strong>広島県</strong><p>aaaaaaaaaa</p>'}); data.push({position:'沖縄',content:'<strong>沖縄</strong><p>aaaaaaaaaa</p>'}); data.push({position:'北海道',content:'<strong>北海道</strong><p>aaaaaaaaaa</p>'}); var geocoder = new google.maps.Geocoder(),icon = ''; function gmap(address,path){ icon = path; geocoder.geocode({'address':address}, function(result,status){ if(status == google.maps.GeocoderStatus.OK){ var latlng = result[0].geometry.location; var mapdiv = document.getElementById('map'); var myOptions = { zoom:10, center:new google.maps.LatLng(latlng.lat(),latlng.lng()), mapTypeId:google.maps.MapTypeId.ROADMAP, scaleControl:true, mapTypeControl:true }; var map = new google.maps.Map(mapdiv,myOptions); moreGmap(map); } }); } var j = 0; function moreGmap(map){ var image = new google.maps.MarkerImage(icon,new google.maps.Size(32,50),new google.maps.Point(0,0),new google.maps.Point(16,50)); for(var i in data){ geocoder.geocode({'address':data[i].position},function(result,status){ if(status == google.maps.GeocoderStatus.OK){ var latlng = result[0].geometry.location; var addlatlng = new google.maps.LatLng(latlng.lat(),latlng.lng()); var marker = new google.maps.Marker({ position:addlatlng, map:map, icon:image, title:data[j].position }); var cont = data[j].content; var infoWin = new google.maps.InfoWindow({ content:cont, size:new google.maps.Size(50,50) }); infoWin.open(map,marker); google.maps.event.addListener(marker,'click',function(){ infoWin.open(map,marker); }); j++; } }); } j = 0; }

  • Googleマップのウィンドウの表示

    Googleマップの情報ウィンドウの件ですが、ページが開いた瞬間ウィンドウが開いた状態にしたいのですが、 クリックしてウィンドウを開く方法しかわかりませんでした。 ワンクッション置かずにウィンドウを表示させる方法はありませんでしょうか？ 以下が関連のソースになります。 上手くカスタマイズできませんでしょうか。（座標はダミーです） よろしくお願いいたします。 //指定されたpoint(緯度経度)、icon、htmlをもったGMarkerを作って返す関数 function createMarker(point, icon, html) { var marker = new GMarker(point, icon); //クリックしたら吹き出し表示 GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } //アイコンを追加 map.addOverlay(createMarker(new GLatLng(105.612038, 27.409698), icon, "<nobr><b>aaa<br>aaa</b><br>aaa<br>aaa</nobr>"));} }

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する