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

Answer 2

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.

Otherwise, I would simply place the contents into a div with a scrollbar:

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

Answer 3

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.

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:

Fixing the 'inherited CSS' problem

Answer 4

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

Above code does the work!