Google Maps InfoWindow shows an unwanted scroll bar (but only once)

Question

I have a problem with InfoWindows displaying incorrectly - it shows the scroll bar, although it should not (but only for the first time)!

I have many polyline routes on my page, and I add the / InfoWindow marker for each route. Added a lot of added markers (looped inside an Ajax call).

This is my definition of InfoWindow (one instance before the 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 the map for the first time (in every new browser instance), I notice that the markup / display for InfoWindow has a scroll bar - and I did not put it there and should not have been there like text for not so long.

Invalid (with scrollbar):

Next time (and all the following) I click on it, it displays correctly without a scrollbar.

Fix (without scrollbar):

I don’t have the CSS specified for the records in Google Maps, and therefore it should not display it correctly every time, and not just the first time.

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

Please see the demo script that shows my problem. I can reproduce the error every time if I close all my (Chrome) browsers, go to the "Script" and click on the route (like the first click). Then it will show the scroll bar for the first time, but only for the first time.

Answer 1

Add the following to your CSS:

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

You see the scroll bar because the default value for the containing element with the scroll bar is overflow:auto , and the content exceeds the height of the container.

You need to use the !important operator, because map styles are defined in a line, and the alternative is to edit using Javascript, but this is probably too large.

More on !important from MDN

When an important rule is used in a style declaration, this declaration cancels any other declaration made in CSS, wherever it is in the list of declarations. Although, it is important to do nothing with the specifics. Using! Importantly, this is bad practice because it does debugging, as you violate the natural cascading style sheet.