Remove Google Maps InfoWindow scrollbars when it only contains an image

published on September 30, 2010 in Website Design

Fixing the scrollbars “bug” on Google Maps InfoWindow.

While working on the Google Maps API, I noticed some sort of “bug” that seemed to appear whenever the Google Maps InfoWindow only contained an image, the accountant practice logo in that case. After searching the web, I tried the fix mentioned: adding a width to the image code, adding a div around the image (with a width superior to the image width) but nothing seemed to work.

After further testing, I added a style=”display:block” to the image declaration in the InfoWindow, which fixed the issue. Hopefully this post will save you some unnecessary headache.

Before the fix was applied: the scrollbars appear on most browsers (not IE6, 7 or 8, though)

After the fix was applied (scrollbars gone):

The fix:
You should now be able to remove the scrollbars from the Google Maps Infowindow by making sure that the content declaration contains style=”display:block;”:

new google.maps.InfoWindow({ content: '<img style="display:block;" src="/path/to/image.gif" alt="" />'});

Obviously it is also possible to give an id to the picture and put the display declaration in your external CSS. This fix was tested on Windows XP and 7 in Firefox 3.5, Opera 11, Google Chrome 8, Safari 5.0.3 and IE 6, 7 an 8.


{ 2 comments… read them below or add one }

Bob February 17, 2011 at 9:53 am

Thanks for this. For me I had a table and some text as well as an image and in every browser bar IE it displayed correctly. Adding the display block to the image caused the balloon to display properly in IE.

Thanks again.


Andrey August 29, 2011 at 9:13 am

Thanks! Been looking for a solution for quite some time now. Bloody IE… :))


Cancel reply

Reply to Bob:

CommentLuv badge

Previous post:

Next post:

©2017 - All rights reserved
Site Map | Legal Stuff