質問: ### 前提・実現したいこと railsでgoogle map apiを利用してピンを複数表示しそれぞれ吹き出しを表示させたいです。 Courtモデルは緯度経度カラムを持っていおり、全てのコートをmapに表示させるとこまではできました。 現状のコードだとピンをクリックした時に最後に読み込まれたピンのみ吹き出しが出ています。 回答お願いいたします ### 該当のソースコード ``` ```
回答: railsは特にわかりませんが、たぶんこれ全部順番に出力されるだけですよね。 JavaScript側で変数が全て上書きされていくことになるので、そういうことになります。 単純に対処するだけであれば、下記のようにすれば動くと思うのですが、いかがでしょう。 (ちゃんと作るならデータをJSONで渡してJavaScript側で処理するほうがいいとは思う) ``` <% @courts.each do |court|%> ( function() { // 即時関数でスコープを作る // マーカーの作成 var markerLatLng = new google.maps.LatLng({lat: <%= court.latitude %>, lng: <%= court.longitude %>}); // 緯度経度のデータ作成 var marker = new google.maps.Marker({ // マーカーの追加 position: markerLatLng, // マーカーを立てる位置を指定 map: map // マーカーを立てる地図を指定 }); //情報ウィンドウの作成 var infowindow = new google.maps.InfoWindow({ position: markerLatLng, content: "Hello" }) marker.addListener('click', function() { infowindow.open(map, marker); }); } )(); // 即時関数がわからなければGoogleで「JavaScript 即時関数」「JavaScript 即時関数 スコープ」とかで調べてみてください <%end%> ```