How Do I Make Google Maps Info Windows Fit The Contents Perfectly In All Browsers?

You can see in the below example that the maps 'info windows' render differently in every browser (sometimes the content is cut off, sometimes the info windows have scroll bars). A

Solution 1:

For anyone else having this issue you just need to override Google's default css like this:

.gm-style-iw{
    height: 100%!important;
    overflow: hidden !important;
    width: auto !important;
}

Important Note: You will also need to make sure that you use the correct javascript url..

CORRECT URL:

<scriptsrc="https://maps.googleapis.com/maps/api/js?v=3"></script>

INCORRECT URL (which is unfortunately used on Google's api pages - https://developers.google.com/maps/documentation/javascript/examples/map-simple:

<scriptsrc="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>