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; 
} 

オーバーフローを持っている必要があり、重要なそれ以外の場合は、GM独自のルールに取って代わられますし、長いです！コンテンツが切断される可能性があります。最大高さは重要ではありませんが、とにかくそれを保つ方が良いでしょう。

方法2：インラインCSS

あなたはIWの内容のテンプレートを使用している場合は、そのオプションは情報ウィンドウごとにインラインスタイルをハードコアすることです。この場合、GMは完全なルールをとっているようですので、！importantを使用する必要はありません。

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

METHOD 3：Javascriptを

あなたは常に動的に物事を変更するためにJSを使用することができます。この方法を使用して、IW矢印を非表示にするなど、他のIW要素をターゲットにして変更することができます。

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