Google отображает проблему высоты информационного окна

Question

Я искал в сети решение.

Моя проблема в том, что высота информационного окна не рассчитана должным образом. Там нет изображений, так что это не проблема с загрузкой изображений позже, а размер неизвестен при создании пузыря.

Кроме того, если я добавлю на 15 строк больше текста, то его размер станет нормальным.

Это то, что я передаю 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

Чтобы решить эту проблему, вы можете установить ширину и высоту основного div. Если вы установите только ширину, это будет работать. Если вы установите ширину, высоту и переполнение: авто, вы также получите полосу прокрутки в случае слишком длинного содержимого.

Однако в Google Maps V3 эта проблема решена.

Answer 2

У меня была та же проблема, но я обнаружил, что у меня была эта проблема, потому что я установил padding для .contInfoBubble в CSS, а не в параметре option. Итак, я удаляю отступы из CSS и устанавливаю его в параметре, когда создаю пузырь в html (пока не .js, а map.html) , таким образом:

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

И я решил проблему. Может быть, вам тоже.

Answer 3

Добавьте min-height в ваш элемент класса infoWindow.

Это решит проблему, если ваши информационные окна имеют одинаковый размер.

Если нет, добавьте эту строку jQuery в функцию щелчка для окна информации:

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