无法显示使用Javascript

Question

我想要绘制在谷歌地图几个地点在谷歌地图的位置信息。我有两个阵列包含某些地方的纬度&经度。 然后，使用该数组，我必须将它们绘制成谷歌地图&必须为地点添加标记。我做到了。

现在...在点击一个标记，一个信息窗口会弹出显示有关该地点的详细信息。我试过了。但不知道什么，没有任何反应。你

也可以找到楼下的JavaScript代码。

谁能告诉我什么是错用此代码。

var map; 
var marker1; 
var marker2; 
var lat_array = [7.170000076293945, 
    9.819999694824219, 8.470000267028809]; 
var lon_array = [79.87000274658203, 
    78.06999969482422, 76.94999694824219]; 
var contentString= new Array(); 

function initialize() { 
    var bounds = new google.maps.LatLngBounds(); 
    var mapOptions = { 
     zoom: 10, 
     center: new google.maps.LatLng(7.170000076293945, 79.87000274658203) 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
    mapOptions); 
    var count_total = lat_array.length; 
    for (i = 0; i < count_total; i++) { 
     var myLatlng = new google.maps.LatLng(lat_array[i], lon_array[i]); 
     bounds.extend(myLatlng); 
     var image = 'mapmarkers/you-are-here-2.png'; 
     var marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: map, 
      title: 'I am here' /*, 
      icon: image */ 
     }); 
     contentString[i] = '<div id="content">'+ 
          '<div id="siteNotice">'+ 
          '</div>'+ 
          '<h1 id="firstHeading" class="firstHeading">'+lon_array[i]+'</h1>'+ 
          '<div id="bodyContent">'+ 
          '<p><b>ICAO:</b>'+lat_array[i]+'.</p>'+ 
          '</div>'+ 
          '</div>'; 
     infowindow = new google.maps.InfoWindow 
         (
          { 
          content: contentString[i] 
          } 
         ); 

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

    map.fitBounds(bounds); 
    } 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

UPDATE：

忘了初始化内容字符串数组。现在完成了。但信息窗口不显示正确的细节。无论我点击哪个标记，信息窗口只显示一个位置。

NEW FIDDLE

Answer 1

由于JavaScript进行if/for块不会创建新的范围，每个点击每个标记将始终对应于最后创建的一个，在创建一个闭合/新范围的for循环：

for (i = 0; i < count_total; i++) { 
    (function() {})(
    ... 
); 
} 

工作代码：

var map; 
var lat_array = [7.170000076293945, 
    9.819999694824219, 8.470000267028809]; 
var lon_array = [79.87000274658203, 
    78.06999969482422, 76.94999694824219]; 


function initialize() { 
    var bounds = new google.maps.LatLngBounds(); 
    var mapOptions = { 
     zoom: 10, 
     center: new google.maps.LatLng(7.170000076293945, 79.87000274658203) 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
    mapOptions); 
    var count_total = lat_array.length; 
    for (i = 0; i < count_total; i++) { 
     (function(){ 
     var myLatlng = new google.maps.LatLng(lat_array[i], lon_array[i]); 
     bounds.extend(myLatlng); 
     var image = 'mapmarkers/you-are-here-2.png'; 
     var marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: map, 
      title: 'I am here' 
     }); 
     var contentString = '<div id="content">'+ 
      '<div id="siteNotice">'+ 
      '</div>'+ 
      '<h1 id="firstHeading" class="firstHeading">'+lon_array[i]+'</h1>'+ 
      '<div id="bodyContent">'+ 
      '<p><b>ICAO:</b>'+lat_array[i]+'.</p>'+ 
      '</div>'+ 
      '</div>'; 
     var infowindow = new google.maps.InfoWindow 
     (
      { 
       content: contentString 
      } 
     ); 

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

     map.fitBounds(bounds); 
      })(); 
    } 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

Working jsfiddle