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

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


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

Above code does the work!


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