How to remove scrollbars from Google map bubble in Google map Javascript V3

Question

I have used Google map javascript V3 API to display a map. But I have a problem with the map bubbles. When the information in the bubble is more than the specific height, it is inserting scrollbars into the bubble.

How can I remove those scrollbars and assign dynamic width & height to the bubble as per their content?

Or how can I design my own custom bubble to make it dynamic for width & height as per the contents?

Thanks in advance.

Answer 1

Had a similar problem - scroll bars appear in popups with text content, sometimes they disappear after closing & opening a popup again, they also appear if I was changing a page zoom level.

This post was helpfull. I added a few CSS strings and it solved all my extra scrollbars cases:

.gm-style-iw {
   overflow: hidden !important; 
   line-height: 1.35;
   white-space: nowrap;
}

Answer 2

If you have an image in your infowindows like I do, try a little inline styling where you are setting the content for the infowindows. I found adding display:block to the img tag fixed the problem for me.

Tested on FF, IE9, Opera, Safari, Chrome.

Example:

    var html = "<img style=\"display:block;\" src=\""+image+"\"/>"