API Карт Google, версия 3: окно InfoWindow неправильно

Question

Похоже, что мое InfoWindow, когда вы щелкаете по значку с домашней страницей на моих Картах Google v3, не выполняет автоматическое изменение размера содержимого InfoWindow.

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

Есть идеи, почему?

По запросу соответствующий JavaScript, который внедряет HTML-код для InfoWindow:

listing = '<div>Content goes here</div>';

UPDATE

Эта ошибка была устранена Google в выпуске

https://issuetracker.google.com/issues/35823659

Исправление было реализовано в феврале 2015 года в версии 3.19 API Карт JavaScript.

Answer 1

Я знаю, что многие другие люди нашли решения, которые работали для их конкретного случая, но поскольку ни один из них не работал для моего конкретного случая, я подумал, что это может быть полезно для кого-то еще.

Некоторые детали:

Я использую API карт Google v3 в проекте, где встроенный CSS - это то, чего мы действительно очень хотим избежать. Мои информационные окна работали для всего, кроме IE11, где ширина была рассчитана неправильно. Это привело к переполнению div, которое вызвало полосы прокрутки.

Мне пришлось сделать три вещи:

1. Удалить все показы: правила стиля встроенного блока из всего, что находится внутри содержимого информационного окна (я заменил на display: block) - у меня появилась идея попробовать это из потока (который я больше не могу найти) где у кого-то была такая же проблема с IE6.

2. Передать содержимое как узел DOM, а не как строку. Я использую jQuery, поэтому я мог бы сделать это, заменив: infowindow.setContent(infoWindowDiv.html()); на infowindow.setContent($(infoWindowDiv.html())[0]); Это оказалось самым простым для меня, но есть много других способов получить тот же результат.

3. Используйте хак "setMaxWidth" - установите параметр MaxWidth в конструкторе - установка этого параметра позже не работает. Если вам не нужна максимальная ширина, просто установите ее на очень большое число.

Я не знаю, почему они работали, и я не уверен, что подмножество их будет работать. Я знаю, что ни один из них не работает для всех моих вариантов использования индивидуально, и что 2 + 3 не работает. У меня не было времени проверить 1 + 2 или 1 + 3.

Answer 2

Просто суммируем все решения, которые работали для меня во всех браузерах:

• Не используйте поля внутри информационного окна, только заполнение.

• Установить максимальную ширину для информационного окна:

  this.infowindow = new google.maps.InfoWindow({ maxWidth: 200 });

• Обернуть содержимое информационного окна с помощью

  <div style="overflow:hidden;line-height:1.35;min-width:200px;">*CONTENT*</div>

  (изменить минимальную ширину для значения, установленного в информационном окне maxWidth)

Я протестировал его, и он работал на каждом браузере, и у меня было более 400 маркеров ...

Answer 3

Мой ответ - добавить прослушиватель (используя addListenerOnce), чтобы проверить, было ли infoWindow добавлено в DOM, а затем снова открыть окно infoWindow (его не нужно закрывать).

// map, marker and infoWindow code, we'll call them 
// myMap, myMarker and myInfoWindow

myInfoWindow.open(myMap, myMarker);
google.maps.event.addListenerOnce(myInfoWindow, 'domready', function(){
                myInfoWindow.open(myMap, myMarker);
            });

Answer 4

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

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

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

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

Answer 5

Я не мог заставить его работать в любой форме или форме, я включал 3 деления в коробку. Я обернул их во внешний div, с шириной и высотой, которые были установлены правильно, и ничего не получалось.

В конце я исправил это, установив div как абсолютный верхний левый угол, а затем перед div, я установил два изображения: одно прозрачное gif шириной 300 пикселей и высотой 1, высотой 120px и шириной 1px. *

Тогда масштабируется правильно!

Ужасно, но работает.

Вы также можете сделать одно изображение и установить ожидаемый zindex, или даже одно изображение, если ваше окно не взаимодействует, но оно содержало форму, так что это не вариант ...

Answer 6

добавить в css

.gm-style-iw{
    overflow: hidden !important;
}

текст информационного окна:

<div style="width: 200px; height:150px;">
  here text of the info window
</div>

Answer 7

У меня была та же проблема, особенно заметная, когда мой элемент <h2> перенесен на вторую строку.

Я применил класс к <div> в информационном окне и изменил шрифты на общий системный шрифт (в моем случае Helvetica) вместо веб-шрифта @ font-face, который он использовал. Проблема решена.

Answer 8

//infowindow.setContent(response);    
var infowindowopts = { 
    maxWidth: 274, 
    content: response
};
infowindow.setOptions(infowindowopts);

Answer 9

Ну, это тот, который сделал мне трюк:

.gm-style-iw>div {
    overflow: visible !important;
}

Только установка overflow: visible на .gm-style-iw на самом деле усугубила проблему! В инспекторе инструментов разработчика Chrome я заметил, что внутри элемента .gm-style-iw есть два элемента div, для каждого из которых по умолчанию установлено значение overflow: auto.

Я отображаю довольно много текста в формате HTML в моих информационных окнах, поэтому другие решения могут вообще не работать для меня.

Answer 10

Я обнаружил, что любая установка высоты строки в любом из элементов внутри содержимого infoWindow вызвала эту проблему. удаление настроек высоты строки решило это для меня.