googlemapAPIを使って複数マーカー表示と吹き出し表示をしたい

前提・実現したいこと

railsでgoogle map apiを利用してピンを複数表示しそれぞれ吹き出しを表示させたいです。
Courtモデルは緯度経度カラムを持っていおり、全てのコートをmapに表示させるとこまではできました。
現状のコードだとピンをクリックした時に最後に読み込まれたピンのみ吹き出しが出ています。
回答お願いいたします

該当のソースコード

          <div id="sample" style='width: 100%; height: 100%;'></div>
          <script>
              // 地図の作成
              var mapLatLng = new google.maps.LatLng({lat: 35.181694, lng: 136.906438}); // 緯度経度のデータ作成
              map = new google.maps.Map(document.getElementById('sample'), { // #sampleに地図を埋め込む
                center: mapLatLng, // 地図の中心を指定
                zoom: 10 // 地図のズームを指定
              });

            <% @courts.each do |court|%>
              // マーカーの作成
              markerLatLng = new google.maps.LatLng({lat: <%= court.latitude %>, lng: <%= court.longitude %>}); // 緯度経度のデータ作成
              marker = new google.maps.Marker({ // マーカーの追加
                position: markerLatLng, // マーカーを立てる位置を指定
                map: map // マーカーを立てる地図を指定
              });

              //情報ウィンドウの作成
              infowindow = new google.maps.InfoWindow({
                position: markerLatLng,
                content: "Hello"
              })

              marker.addListener('click', function() {
              infowindow.open(map, marker);
              });

            <%end%>
          </script>

kei344

2019/03/11 14:47

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

行動規範の内容に同意します

回答1件

ベストアンサー

railsは特にわかりませんが、たぶんこれ全部順番に出力されるだけですよね。
JavaScript側で変数が全て上書きされていくことになるので、そういうことになります。

単純に対処するだけであれば、下記のようにすれば動くと思うのですが、いかがでしょう。
（ちゃんと作るならデータをJSONで渡してJavaScript側で処理するほうがいいとは思う）

js
1            <% @courts.each do |court|%>
2            ( function() { // 即時関数でスコープを作る
3              // マーカーの作成
4              var markerLatLng = new google.maps.LatLng({lat: <%= court.latitude %>, lng: <%= court.longitude %>}); // 緯度経度のデータ作成
5              var marker = new google.maps.Marker({ // マーカーの追加
6                position: markerLatLng, // マーカーを立てる位置を指定
7                map: map // マーカーを立てる地図を指定
8              });
9
10              //情報ウィンドウの作成
11              var infowindow = new google.maps.InfoWindow({
12                position: markerLatLng,
13                content: "Hello"
14              })
15
16              marker.addListener('click', function() {
17                infowindow.open(map, marker);
18              });
19            } )(); // 即時関数がわからなければGoogleで「JavaScript 即時関数」「JavaScript 即時関数 スコープ」とかで調べてみてください
20
21            <%end%>