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

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 2

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