如何設置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';