无法使用Javascript在google地图中显示位置详细信息

我试图在谷歌地图上标出几个位置。我有两个数组，包含某些地方的纬度和经度。 然后，使用这个数组，我必须将它们绘制到谷歌地图上&必须为这些地方添加标记。我做到了

现在…点击一个标记，就会弹出一个信息窗口，显示这个地方的详细信息。我试过了。但不知道发生了什么，什么也没发生

您还可以在下面找到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);

var映射；
var-marker1；
var-marker2；
var lat_数组=[7.170000076293945，
9.819999694824219, 8.470000267028809];
var lon_阵列=[79.87000274658203，
78.06999969482422, 76.94999694824219];
var contentString=新数组（）；
函数初始化（）{
var bounds=new google.maps.LatLngBounds（）；
变量映射选项={
缩放：10，
中心：新google.maps.LatLng（7.17000007629394579.87000274658203）
};
map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
var count_total=lat_array.length；
对于（i=0；i+
''+
'';
infowindow=新建google.maps.infowindow
(
{
内容：contentString[i]
}
);
google.maps.event.addListener（标记'click'，函数（）
{
信息窗口。打开（地图、标记）；
});
映射边界（bounds）；
}
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

更新：

我忘了初始化内容字符串数组。现在它完成了。但信息窗口未显示正确的详细信息。在我单击的任何标记上，信息窗口仅显示一个位置。

---

由于在JavaScript中不会为

if/for

块创建新范围，因此每次单击每个标记都将始终对应于上次创建的标记，因此在for循环中创建一个闭包/新范围：

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

for（i=0；i

工作代码：

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);

var映射；
var lat_数组=[7.170000076293945，
9.819999694824219, 8.470000267028809];
var lon_阵列=[79.87000274658203，
78.06999969482422, 76.94999694824219];
函数初始化（）{
var bounds=new google.maps.LatLngBounds（）；
变量映射选项={
缩放：10，
中心：新google.maps.LatLng（7.17000007629394579.87000274658203）
};
map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
var count_total=lat_array.length；
对于（i=0；i+
''+
'';
var infowindow=new google.maps.infowindow
(
{
内容：contentString
}
);
google.maps.event.addListener（标记'click'，函数（）
{
信息窗口。打开（地图、标记）；
});
映射边界（bounds）；
})();
}
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

---

控制台对您说话：

未捕获引用错误：未定义contentString

当我在本地运行该页面时，Mozilla Firefox的控制台没有对我说话@Alex忘记初始化contentString。现在它完成了。但错误依然存在@有人请告诉我这个问题是怎么离题的？？？我确实提供了源代码，要求提供代码的奇怪行为。我提供了一切@TJ很生气，因为我没有接受他的最终答案。于是他掀起了这股浪潮。我没有根据答案更新问题。检查编辑状态。像@tj这样的人让新用户很难提出问题。他否决了这个问题。恶心。没错，我把旧小提琴拿走了，又添了一把新小提琴。两把小提琴都是一样的。我在New Fiddle中所做的唯一更改是初始化数组。感谢@Alex，他指出了这一点。我认为，如果你只是为了创建点击处理程序而使用闭包，会更干净一些：谢谢。注意到这一点@迷失理论