如何设置Google地图标记的infowindow最大高度？

Question

如果标记信息窗口的内容太长，它不适合窗口，它会在底部溢出。我怎样才能解决这个问题？

Answer 1

这个问题也可以是继承的样式被应用到信息窗口内容的结果已经连接到后地图。

例如：字体大小将根据默认字体计算。当信息窗口被附加时，字体将根据继承的CSS而改变，并且如果它更大，则会溢出信息窗口的底部。

如果您不想删除继承的样式（并且大多数情况下您不需要），则需要明确地在信息窗口内容中反转继承的样式。

你可以找到这个问题的一个很好的描述，它的解决方案：

Fixing the 'inherited CSS' problem

Answer 2

如果InfoWindow包含图片，则可能会溢出，因为InfoWindow的大小在图片下载之前设置。如果是这种情况，则需要指定图像的大小，或者预先加载它。

否则，我会简单地把内容放到一个div滚动条：

div.infowindow { 
    max-height:250px; 
    overflow-y:auto; 
} 

Answer 3

.gm-style-iw{ 
    max-height: 10px; 
} 

上面的代码做的工作！

Answer 4

接受的答案是有点模糊......

因此，这里的任何人都希望改变信息窗口的高度，或其他样式属性一对夫妇直接的解决方案。

方法1：CSS

应用CSS规则，如下所示。它改变了所有的信息窗口的：

.gm-style-iw { 
    max-height: 200px !important; 
    overflow: auto !important; 
} 

或者，如果你有自定义的IW的模板，这样可以工作太：

#myInfoWindow-content { 
    max-height: 200px !important; 
    overflow: auto !important; 
} 

溢出需要有重要的，否则它就会通过通用汽车自己的规则和长久取代！内容可能被截断。最大高度将无需工作！重要的，但可能更好地保持它无论如何。

方法2：内联CSS

如果你使用模板IW内容，那么一个选项是铁杆每个信息窗口内嵌样式。你不需要使用！因为通用汽车似乎在这种情况下采取了完整的规则。

<div id="myInfoWindow-content" style="max-height: 150px; overflow: auto;"> 
    content 
</div> 

方法3：使用Javascript

您可以随时使用JS动态修改的事情。您可以使用此方法来定位和修改其他IW元素，如隐藏IW箭头。

document.getElementById('myInfoWindow-content').style.maxHeight = '20px'; 
document.getElementById('myInfoWindow-content').style.overflow = 'auto';