Gmaps API v3 -> infoWindow 内容未显示

Question

我在我的网站上使用 Google Maps API v3 并尝试显示标记数组中的标记。

以下是相关代码：

var map;
var markersArray = [];
var infowindow;
var marker;

然后我将循环中的标记添加到数组中，调用以下函数

function addMarker(location, name) {
      marker = new google.maps.Marker({
      position: location,
      map: map,
      company: name,
      title: name
   });
   markersArray.push(marker);
}

然后我尝试使用此功能显示标记，这就像一个魅力：

function showOverlays() {
   if (markersArray) {
      for (var i in markersArray) {
         markersArray[i].setMap(map);
         google.maps.event.addListener(markersArray[i], 'click', function () {
         infowindow.setContent('<div style="height:300px; color:black">' + this.title +     '</div>');
         infowindow.open(map, this);
         });
      }
   }
}

现在我的问题来了：infoWindows 的内容没有显示出来。它打开了，但什么都没有显示... 如果我在其中放置一个 300px 高的 div，则 infoWindow 实际上会正确调整大小......但没有显示任何内容。

我已经在网上上下搜索并尝试摆弄它，但无济于事。

有没有人遇到过这种情况，可能会给我提示如何解决这个问题？

提前致谢！

克里斯

Answer 1

我刚刚发现了错误！

我已经使用 CSS 设置了父 div（地图画布所在的 DIV）...并将 z-index 设置为 11。显然这阻止了信息窗口的内容位于顶部...

希望能帮助一些可能犯过同样“错误”的人:)

感谢 kevmc 的帮助

Answer 2

我认为标记对象没有标题属性，您需要使用getTitle() 检索它：

function showOverlays() {
   if (markersArray) {
      for (var i in markersArray) {
         markersArray[i].setMap(map);
         google.maps.event.addListener(markersArray[i], 'click', function () {
         infowindow.setContent('<div style="height:300px; color:black">' + this.getTitle() +     '</div>');
         infowindow.open(map, this);
         });
      }
   }
}