Google Map Javascript API 不在 Ruby 循环中显示 InfoWindows答案

【问题标题】：Google Map Javascript API doesn't show InfoWindows in Ruby loopGoogle Map Javascript API 不在 Ruby 循环中显示 InfoWindows
【发布时间】：2017-07-16 15:28:55
【问题描述】：

我正在遍历运动营地列表，并在 Google 地图上为每个营地绘制一个标记。这对我有用。但是，当我单击标记查看每个营地的信息窗口时，它只会在第一个营地打开 - 当我单击任何其他标记时它不会显示。

你知道有什么问题吗？

Javascript：

<script>
    function initMap() {
            var start = {lat: 43.3520209, lng: 9.9078704};

            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 3,
                center: start,
                scrollwheel: false
            });

            <% @camps.each do |camp| %>
            var <%= camp.city %> = {lat: <%= camp.longitude %>, lng: <%= camp.latitude %>};

            var contentString = '<%= link_to camp.name, camp.url, target: "_blank" %>'

            var infowindow = new google.maps.InfoWindow({
                content: contentString,
                maxWidth: 200,
                maxHeight: 200
            });

            var marker = new google.maps.Marker({
                position: <%= camp.city %>,
                map: map
            });

            <% end %>

            marker.addListener('click', function() {
                    infowindow.open(map, marker);
                  });
    }
  </script>

【问题讨论】：

如果我将marker.addListener 移动到循环内，那么两个标记都会开始打开信息窗口，但无论您点击哪个标记，它总是会打开“巴塞罗那”营地之一。
每次迭代都会覆盖 javascript vars。
你是对的。目前对 JS 不太熟悉。您对我如何解决此问题有任何资源/解释吗？

标签： javascript ruby-on-rails ruby google-maps

【解决方案1】：

这是一个有效的答案，我从这个答案中学到了：How to Create InfoWindows for Multiple Markers in a For loop

<script>
    function initMap() {
            var start = {lat: 43.3520209, lng: 9.9078704};
            var infowindow = new google.maps.InfoWindow();

            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 3,
                center: start,
                scrollwheel: false
            });

            <% @camps.each do |camp| %>
            var markerLatlng = new google.maps.LatLng(<%= camp.longitude %>, <%= camp.latitude %>);
        var title = <%= camp.id %>
        var iwContent = '<div class="inside">'
            + '<%= image_tag(camp.image.url) %>'
            + '<br />'
            + '<br />'
            + '<%= link_to camp.name, camp.url, target: "_blank" %>'
            + '</div>'

            createMarker(markerLatlng, title, iwContent);

            function createMarker(latlon,title,iwContent) {
          var marker = new google.maps.Marker({
              position: latlon,
              title: title,
              map: map
        });

            google.maps.event.addListener(marker, 'click', function () {
            infowindow.setContent(iwContent);
            infowindow.open(map, marker);
            });

        }

            <% end %>

    }
  </script>

【讨论】：