My InfoWindows are not displaying correctly, as they show a scrollbar when they shouldn't (only on the first time)!
I have multiple polyline routes on my page and I am adding a marker/InfoWindow for each route. This results in several markers being added within an Ajax call loop.
This is how I define the InfoWindow (single instance before the loop):
// Setting up an info window
var infowindow = new google.maps.InfoWindow( { content: "" } );
During the loop where markers are added:
// Placing a marker at the last known position
var marker = new google.maps.Marker({
position: lastLatLng,
title: "My text",
map: map,
icon: iconCar
});
// Clicking on a marker opens an info window
google.maps.event.addListener(marker,"click",function() {
infowindow.open(map,this);
infowindow.setContent(this.title);
});
The issue arises when opening the map for the first time (in each new browser instance), where the InfoWindow markup/display contains a scrollbar - despite the text not being long enough to warrant one.
Incorrect (with scrollbar):
However, on subsequent clicks, the InfoWindow displays correctly without the scrollbar.
Correct (without scrollbar):
No CSS has been specified for Google Maps entries, so this behavior should be consistent rather than occurring only on the initial display.
I have attempted various solutions suggested in this question, Google Maps API v3: InfoWindow not sizing correctly, with no success in resolving the problem.
Please refer to this Fiddle demo that showcases this issue. The error can be reproduced by closing all Chrome browsers, visiting the Fiddle, and clicking on a route (first click). The scrollbar will appear just once during the first interaction.