How to set Google map's marker's infowindow max height?

Question

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?

Answer 1

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.

Method 1: CSS

Apply a CSS rule like so. It changes all infowindow's:

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

Or, if you have custom IW templates, this can work too:

#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.

Method 2: Inline CSS

If you use templates for IW content, then an option is to hardcode styles inline per infowindow.

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

Method 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.

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