Html 如何设置谷歌地图标记的信息窗口最大高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/919659/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set Google map's marker's infowindow max height?
提问by egaga
If the contents of the info window of marker is too long, it won't fit into the window, it will overflow at the bottom. How can I fix this?
如果marker 信息窗口的内容太长，它就不能适应窗口，它会在底部溢出。我怎样才能解决这个问题？
采纳答案by RedBlueThing
This problem can also be a result of inherited styles being applied to the info window contents after it has been attached to the map.
此问题也可能是在信息窗口内容附加到地图后对其应用继承样式的结果。
For instance: The font size will be calculated based on the default font. When the info window is attached, the font will change based on the inherited CSS and, if it is larger, will overflow of the bottom of the info window.
例如：字体大小将根据默认字体计算。附加信息窗口时，字体将根据继承的 CSS 更改，如果较大，将溢出信息窗口底部。
If you don't want to remove the inherited style (and mostly you don't), you need to explicitly countermand the inherited style in the info window content.
如果您不想删除继承的样式（并且大多数情况下您不想删除），则需要在信息窗口内容中明确取消继承的样式。
You can find an excellent description of this problem and it's solution at:
您可以在以下位置找到有关此问题的出色描述及其解决方案：
回答by fuiiii
.gm-style-iw{
max-height: 10px;
}
Above code does the work!
上面的代码可以工作！
回答by Chris B
If the InfoWindow contains a picture, it may be overflowing because the size of the InfoWindow is set before the picture downloads. If this is the case, you'll need to specify the size of the image, or pre-load it.
如果 InfoWindow 包含图片，它可能会溢出，因为在图片下载之前设置了 InfoWindow 的大小。如果是这种情况，您需要指定图像的大小，或预加载它。
Otherwise, I would simply place the contents into a div with a scrollbar:
否则，我只需将内容放入带有滚动条的 div 中：
div.infowindow {
max-height:250px;
overflow-y:auto;
}
回答by MarsAndBack
The accepted answer is a bit vague...
接受的答案有点含糊......
So here's a couple of direct solutions for anyone looking to change the height of InfoWindows, or other style properties.
因此，对于希望更改 InfoWindows 高度或其他样式属性的任何人，这里有几个直接解决方案。
Method 1: CSS
方法一：CSS
Apply a CSS rule like so. It changes all infowindow's:
像这样应用 CSS 规则。它改变了所有信息窗口的：
.gm-style-iw {
max-height: 200px !important;
overflow: auto !important;
}
Or, if you have custom IW templates, this can work too:
或者，如果您有自定义 IW 模板，这也可以：
#myInfoWindow-content {
max-height: 200px !important;
overflow: auto !important;
}
Overflow needs to have !important, otherwise it gets superseded by GM's own rules and long content could be cut-off. Max-height will work without !important, but probably better to keep it anyways.
溢出需要有 !important ，否则它会被 GM 自己的规则取代，长内容可能会被截断。Max-height 可以在没有 !important 的情况下工作，但最好还是保留它。
Method 2: Inline CSS
方法 2：内联 CSS
If you use templates for IW content, then an option is to hardcode styles inline per infowindow.
如果您为 IW 内容使用模板，则一个选项是对每个信息窗口内嵌的样式进行硬编码。
<div id="myInfoWindow-content" style="max-height: 150px; overflow: auto;">
content
</div>
Method 3: Javascript
方法 3：Javascript
You can always use JS to modify things dynamically. You can use this method to target and modify other IW elements, like hiding IW arrows.
您始终可以使用 JS 动态修改内容。您可以使用此方法定位和修改其他 IW 元素，例如隐藏 IW 箭头。
document.getElementById('myInfoWindow-content').style.maxHeight = '20px';
document.getElementById('myInfoWindow-content').style.overflow = 'auto';
