Как установить максимальную высоту указателя маркера карты Google?

Question

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

Answer 1

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

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

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

Вы можете найти превосходное описание этой проблемы, и это решение по адресу:

Fixing the 'inherited CSS' problem

Answer 2

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

В противном случае, я бы просто поместить содержимое в DIV с скроллинга:

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

Answer 3

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

Приведенный выше код делает работу!

Answer 4

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

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

Метод 1: CSS

Применить правило CSS, как это. Это меняет все InfoWindow-х:

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

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

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

перелива должна иметь важное значение, в противном случае он получает вытеснены ГМ собственные правила и долго! контент может быть отключен. Max-height будет работать без! Важно, но, вероятно, лучше держать его в любом случае.

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

Если вы используете шаблоны для содержания ИВ, то вариант является хардкор стили инлайн в InfoWindow. Вам не нужно использовать! Важно, потому что 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';