Google Maps InfoWindow shows an unwanted scrollbar (but only once)

Question

I have a problem with my InfoWindows being shown incorrectly - it shows a scrollbar though it should not (but only the first time)!

On my page I have a lot of polyline routes and I am adding a marker/InfoWindow for each route. There are a lot of markers added (looped inside a Ajax call).

This is my definition of the InfoWindow (single instance before loop):

// Define an info window
var infowindow = new google.maps.InfoWindow( { content: "" } );

And this is inside my loop where I add markers:

// Set a marker on the last known position
var marker = new google.maps.Marker({
    position: lastLatLng,
    title: "My text",
    map: map,
    icon: iconCar
});

// Click on a marker to open an info window
google.maps.event.addListener(marker,"click",function() {
    infowindow.open(map,this);
    infowindow.setContent(this.title);
});

When I open up the map for the first time (in every new browser instance) I notice that the markup/display for the InfoWindow has a scrollbar - and I have not put it there nor should it even be there as the text is not that long.

Wrong (with scrollbar):

The next time (and all the following) I click it, it shows up correctly without the scrollbar.

Correct (without scrollbar):

I don't have any CSS specified for Google Maps entries and even so it should be showing it wrong every time and not just the first time.

I have tried all tricks from this question, Google Maps API v3: InfoWindow not sizing correctly, but nothing seems to solve my problem.

Please see this Fiddle demo which shows my problem. I can reproduce the error every time if I close down all my (Chrome) browsers, go to the Fiddle and click on a route (as the first click). Then it will show the scrollbar the first time but only the first time.

Answer 1

Add the following to your CSS:

div.gm-style-iw{
  overflow:hidden!important;
}

You're seeing the scrollbar because the default setting for the containing element with the scrollbar is overflow:auto and the content is exceeding the container's height.

You need to use the !important operator because the map styles are defined inline- and alternative would be to edit with Javascript, but this is likely overkill.

More on !important from MDN

When an !important rule is used on a style declaration, this declaration overrides any other declaration made in the CSS, wherever it is in the declaration list. Although, !important has nothing to do with specificity. Using !important is bad practice because it makes debugging hard since you break the natural cascading in your stylesheets.