【Railsで】GoogleMapsAPIのマーカーをクリックした際にinfowindowを適切に表示したい

#実現したいこと
APIを用い、GoogleMap上に複数のマーカーを表示させて
そのマーカーをクリックした際に、**「クリックしたマーカーの情報を」**infowindowで表示したい

#現状
現在、Railsのeach文によって、複数のマーカーを表示させています（成功、画像部分）

コード

コントローラ
@place= Place.all
placeインスタンスには座標情報がfloatで入っています。

index.html.erb
1<script>
2
3   
4  function initMap() {
5      
6      var latlng = new google.maps.LatLng(36.10, 139.5123);
7      var styles = [
8           {
9            stylers: [
10             { "saturation": -95 },
11             { "lightness": -20 }
12            ]
13           }
14          ];
15          
16      var map = new google.maps.Map(document.getElementById('map'), {
17          zoom: 9,
18          styles: styles,
19          center: latlng
20      });
21      var transitLayer = new google.maps.TransitLayer();
22      transitLayer.setMap(map);
23      
24      //複数マーカー
25      <% @places.each do |place| %>
26      
27        var contentString = '<%= link_to place.name, place_path(place) %>'; 
28        var infowindow = new google.maps.InfoWindow({
29            content: contentString
30        });
31        
32        var marker = new google.maps.Marker({
33            position:{lat: <%= place.latitude %>, lng: <%= place.longitude %>},
34            map: map,
35            title: contentString,
36            icon: '../img/mapicon.png'
37        });
38        
39      <% end %>
40      
41      marker.addListener('click', function() {
42            infowindow.open(map, marker);
43        });
44    
45  }
46</script>

**「クリックしたマーカーの情報」**と書きましたが、each文のせいなんでしょうけれど
この画像の場合、最も新しい＝each的に最後に処理される位置のinfowindowのみが表示されます。
それ以外のマーカーをクリックしても何も起こりません。
これをどうにかして、正しく、クリックしたマーカーごとに固有のinfowindowが表示されるようにしたいです。

#試したこと

   <% @places.each do |place| %>
        中略
        marker.addListener('click', function() {
            infowindow.open(map, marker);
        });
   <% end %>

この場合、どのマーカーをクリックしても、最も新しく登録された場所のinfowindowが強制的に表示されます。

##JSON化
JSON化してからfor文で処理するのが適切と思い、最初はJSON化して複数のマーカーを表示させようかと思ったんですが
どうにもうまく行かなかったため、現状の方法にしました。
やはりJSON化を試すべきでしょうか…？

#環境
Cloud9
Ruby 2.4.1
Rails 5.2

よろしくお願い致します。

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

回答1件

ベストアンサー

とりあえずこうすれば処理は出来そうです。元々の問題は同一スコープ内で同じ変数を何回も宣言していることです。（上書きされるので最後の物しか追加されない）

js
1      //複数マーカー
2      <% @places.each do |place| %>
3(function(){
4        var contentString = '<%= link_to place.name, place_path(place) %>'; 
5        var infowindow = new google.maps.InfoWindow({
6            content: contentString
7        });
8
9        var marker = new google.maps.Marker({
10            position:{lat: <%= place.latitude %>, lng: <%= place.longitude %>},
11            map: map,
12            title: contentString,
13            icon: '../img/mapicon.png'
14        });
15      marker.addListener('click', function() {
16            infowindow.open(map, marker);
17        });
18})();
19      <% end %>