Как установить максимальную высоту информационного окна маркера карты Google?

Question

Если содержимое информационного окна маркера слишком длинное, оно не помещается в окно, оно переполняется внизу. Как я могу это исправить?

Answer 1

Эта проблема также может быть результатом применения унаследованных стилей к содержимому информационного окна после его прикрепления к карте.

Например: размер шрифта будет рассчитываться на основе шрифта по умолчанию. Когда информационное окно прикреплено, шрифт изменится в зависимости от унаследованного CSS и, если он будет больше, переполнится в нижней части информационного окна.

Если вы не хотите удалять унаследованный стиль (а в основном это не так), вам необходимо явно поменять унаследованный стиль в содержимом информационного окна.

Отличное описание этой проблемы и ее решения можно найти по адресу:

Исправление проблемы «унаследованного CSS»

Answer 2

.gm-style-iw{
    max-height: 10px;
}

Над кодом работает!

Answer 3

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

В противном случае я просто поместил бы содержимое в div с полосой прокрутки:

div.infowindow {
    max-height:250px;
    overflow-y:auto;
}

Answer 4

Принятый ответ немного расплывчатый ...

Итак, вот пара прямых решений для тех, кто хочет изменить высоту InfoWindows или другие свойства стиля.

Метод 1: CSS

Применить правило CSS следующим образом. Это меняет все информационные окна:

.gm-style-iw {
    max-height: 200px !important;
    overflow: auto !important;
}

Или, если у вас есть пользовательские шаблоны IW, это тоже может работать:

#myInfoWindow-content {
    max-height: 200px !important;
    overflow: auto !important;
}

Переполнение должно иметь важное значение! В противном случае оно заменяется собственными правилами GM, и длинный контент может быть отключен. Макс. Высота будет работать без! Важно, но, вероятно, лучше все равно его сохранить.

Метод 2: встроенный CSS

Если вы используете шаблоны для содержимого IW, то вариант - встроить жесткие стили для каждого информационного окна. Вам не нужно использовать! Важный, потому что в этом случае GM, кажется, принимает полные правила.

<div id="myInfoWindow-content" style="max-height: 150px; overflow: auto;">
  content
</div>

МЕТОД 3: Javascript

Вы всегда можете использовать JS для динамического изменения. Этот метод можно использовать для нацеливания и изменения других элементов IW, например, для скрытия стрелок IW.

document.getElementById('myInfoWindow-content').style.maxHeight = '20px';
document.getElementById('myInfoWindow-content').style.overflow = 'auto';