Google Map InfoWindow displays scroll bars in Google Chrome

I found a workaround here.

I made this JSfiddle, displaying the bug and a workaround.

If you do not want to visit external links, here is the workaround description:

Add a wrapping div to your info window content:

var infoWindow = new google.maps.InfoWindow({
    content: '<div class="scrollFix">'+infoWindowContent+'</div>',
    [...]
}).open(map);

And use CSS definitions to avoid scrollbars:

.scrollFix {
    line-height: 1.35;
    overflow: hidden;
    white-space: nowrap;
}

To hide the scrollbars, give your content a high z-index stack order, eg.:

var infowindow = new google.maps.InfoWindow({
    content: '<div style="z-index:99999">Message appears here</div>',
});

Or, add the following style:

.gm-style-iw {
    overflow:hidden!important;
    height:55px!important; //for 3 lines of text in the InfoWindow
}

Tags:

Google Maps