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

Question

我正在浏览一系列运动营地，并在Google地图上为每个营地绘制一个标记。这适合我。但是，当我单击标记以查看每个阵营的InfoWindow时，它只会在第一个阵营打开 - 当我点击任何其他标记时它不显示。

你看到了什么问题吗？

使用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>

Answer 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>