谷歌地图信息窗口没有按预期大小答案

【问题标题】：Google maps Infowindow doesnt size as expected谷歌地图信息窗口没有按预期大小
【发布时间】：2015-01-11 01:49:10
【问题描述】：

我只想显示一个默认信息窗口，内容为The 123456789。所以我正在使用来自谷歌的地图example，并更改信息窗口内容。就这么简单。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"><meta charset="utf-8">
    <title>Info windows</title>
    <style>html, body, #map-canvas {height: 100%;margin: 0px;padding: 0px}</style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {zoom: 4,center: myLatlng};

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);                        
  var infowindow = new google.maps.InfoWindow({
      content: 'The 123456789'
  });

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Uluru (Ayers Rock)'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head><body><div id="map-canvas"></div></body></html>

我在 Firefox 和 Chrome 中都得到了这个（预计 The 123456789）。只有在 IE 中我才有想要的结果。文本的其余部分被换行，并且在 chrome 中滚动条也是可见的。

现在，根据文档，应该扩展 InfoWindow 以适合我的文本，如果内容比我正在测试的内容长一点，它会这样做。这是谷歌地图样式问题吗？如何在没有自定义 InfoWindows 且没有 hackish css 的情况下简单地显示该文本？

编辑

再次测试了居住代码。信息窗口第一次显示有问题时，接下来会按应有的方式显示。

【问题讨论】：

您发布的代码适用于我的 Chrome。
@geocodezip 我第一次单击它时几乎显示为问题中的图像，随后的单击显示信息窗口应该如此。
这不是我在 Chrome 中看到的。你用的是什么浏览器？
截图使用的是firefox。在 chrome 中，我还在关闭按钮的左侧看到一个小的垂直滚动条

标签： javascript google-maps

【解决方案1】：

刚刚测试了您的代码，似乎是正确的。

https://www.dropbox.com/s/i1bgvg74chb3hzt/Screenshot%202015-01-10%2017.53.36.png?dl=0

您可以做的一件事是，您可能想要创建实例，然后单击设置内容，而不是创建充满内容的信息窗口。

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

【讨论】：

我已经在我的实际问题中尝试过这个并没有帮助。 infoWindow 第一次具有正确的大小。如果我关闭并重新打开它，它就是这样的。我总是在演出前设置内容。您使用我问题中的代码在哪个浏览器中获得了该结果？

【解决方案2】：

您应该将文本放在具有样式或具有样式属性的类的“

”标签中

   var infowindow = new google.maps.InfoWindow({
       content: '<div style="width: 10em;">The 123456789</div>'
   });

【讨论】：

【解决方案3】：

您可以尝试向 infowindow 'domready' 事件添加一个侦听器（使用 addListenerOnce），关闭 infowindow，然后重新打开它。

概念证明代码sn-p：

function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var infowindow = new google.maps.InfoWindow({
    content: 'The 123456789'
  });

  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  google.maps.event.addListener(marker, 'click', function() {
    google.maps.event.addListenerOnce(infowindow,'domready',function() {
      infowindow.close();
      infowindow.open(map,marker);
    });
    infowindow.open(map, marker);
  });
    google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });
  google.maps.event.trigger(marker,'click');
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map-canvas"></div>

【讨论】：

我可以使用 Firefox 复制该问题。它似乎在 Chrome 中已解决。只需按 Ctrl+F5。第一次单击标记时，它不会正确显示。后续点击效果很好。
代码 sn-p 在 Chrome (39.0.2171.95 m) 和 Firefox (34.0.5) 中都适用 [Ctrl+F5 & "Run code sn-p"]

【解决方案4】：

尝试添加

style="word-wrap:nospace"

作为内容的属性

var infowindow = new google.maps.InfoWindow({
    content: '<p style="word-wrap:nospace">'+The 123456789+'</p>'
});

【讨论】：

【解决方案5】：

这是由于全局 img 样式造成的。为了恢复它，我刚刚添加了

.gm-style img { max-width: none; }

感谢answer。

【讨论】：