Google maps infowindow height problem

Question

I've been searching the net for a solution.

My problem is that the info window's height is not calculated properly. There are no images in there so it is not an issue with the image loading later and the size is not known when the bubble is created.

Also if I fill it up with about 15 lines more text the size is starting to get alright.

This is what I feed to infoWindowHtml:

<div><h2><a href="">Some title</a></h2><dl><dt>Location:</dt><dd>london</dd><dt>Description</dt><dd><p>Example text </p></dd></dl><p><a href="">Read more...</a></p></div>

Answer 1

To solve this problem you can set width and height of the main div. If you set only the width, it will work. If you set width, height, and overflow:auto, you'll get also a scrollbar in case of a too long content.

However in Google Maps V3 this issue is solved.

Answer 2

I had the same problem but i discovered that i had this problem because i set padding to the .contInfoBubble in the CSS, and don´t in the option parameter. So, i remove the padding from the CSS and i set it in the parameter when i create the bubble in the html (not the .js yet but map.html), this way:

[...]
var ib = new InfoBubble({
   //minHeight: 125,
   minWidth: 220,
   padding: 7,
   borderColor: "#dedede",
   borderRadius: 3,
   pixelOffset: new google.maps.Size(-140, -110),
});
[...]

And i solved the problem. Maybe to you too.

Answer 3

Add a min-height to your infoWindow class element.

That will resolve the issue if your infoWindows are all the same size.

If not, add this line of jQuery to your click function for the infoWindow:

//remove overflow scrollbars
$('#myDiv').parent().css('overflow','');