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

我正在循环显示一系列运动阵营，并在每个阵营的Google地图上绘制一个标记。这对我有用。然而，当我点击标记来查看每个阵营的InfoWindow时，它只会在第一阵营中开放 - 当我点击任何其他标记时它不会显示。Google Map Javascript API不会在Ruby环路中显示InfoWindows

你看到有什么问题吗？

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

来源

2017-02-25 Andy

如果我移动'marker.addListener'内循环那么两个标记都会开始打开InfoWindow，但无论您点击哪个标记，它都会打开“巴塞罗那”阵营。 – Andy

每次迭代都覆盖JavaScript'var's。 –

你说得对。在这一点上不太熟悉JS。你有什么资源/解释我如何解决这个问题？ – Andy

这里是一个工作的答案，我从这个教训：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>

来源

2017-02-25 21:46:44 Andy

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

回答

相关问题