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

Добавление следующего в мой CSS помогло мне:

white-space: nowrap;

Answer 2

У меня был встроенный элемент (тег) непосредственно внутри div с style="overflow:auto"[..., который обернул его в тег p и исправил его.

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

Answer 3

По состоянию на середина 2014 года в Google Maps v3 , по-видимому, существует ошибка определения размера InfoWindow, которая затрагивает несколько браузеров.

Сообщалось здесь:
https://code.google.com/p/gmaps-api-issues/issues/detail?id=5713
( и демонстрационная версия JSFiddle здесь )
Пожалуйста, нажмите на звездочку над вопросом выше, чтобы проголосовать за ее исправление!

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

Плохие обходные пути:

Поиграв с большинством предложений на этой странице, следующие НЕ хорошие решения :

• overflow: hidden (потенциально может обрезать содержимое)
• white-space: nowrap (потенциально может обрезать содержимое)
• Передача объекта jQuery или узлов DOM (контент потенциально может выходить за пределы окна InfoWindow)
• Установка содержимого InfoWindow после его открытия (само по себе, не помогает)
• Изменение шрифта от Roboto (проблема может возникнуть с любым шрифтом)

Один из возможных обходных путей - дать вашему InfoWindow фиксированную ширину (например, для тех, кто предложил установить max-width и min-width), однако, когда у вас много маркеров, а количество контента колеблется, это не идеально , Это также плохо для мобильных / адаптивных дизайнов.

Разумный обходной путь:

Так что, пока Google не исправит это, мне пришлось искать обходной путь. После примерно 12 часов тестирования и отладки я получил следующее:

Это не имеет те же недостатки, что и другие предложения.

• Контент никогда не должен обрезаться (если только у вас нет больших изображений, которые превышают ширину InfoWindow).
• Добавляются вертикальные полосы прокрутки, но только при необходимости.
• Содержание не должно выходить за пределы окна InfoWindow
• В большинстве случаев окно InfoWindow автоматически подбирается по размеру (не фиксированный размер)
• Подходит для мобильных телефонов и адаптивных макетов
• Поля, отступы, шрифты должны работать нормально

Downsides:

• Моя версия требует jQuery, но, вероятно, она может быть переработана, чтобы быть чистой JS
• Он создает 20 пикселей отступа справа от содержимого, чтобы освободить место для полосы прокрутки в случае необходимости. Вы можете пропустить это, если хотите, или выполнить дополнительную проверку, чтобы добавить отступ только при необходимости.
• Это довольно странно, но без редактирования JavaScript Google, возможно, это единственный выход.

Посмотреть код на Github

Пожалуйста, отправляйте улучшения и исправления по мере их нахождения.

Answer 4

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

// map is created using google.maps.Map() 
// marker is created using google.maps.Marker()
// set the css for the content div .infowin-content { visibility: hidden; } 

infowindow = new google.maps.InfoWindow();    
infowindow.setContent("<div class='infowin-content'>Content goes here</div>");
infowindow.setPosition(marker.getPosition());
infowindow.set("isdomready", false);
infowindow.open(map);   

// On Dom Ready
google.maps.event.addListener(infowindow, 'domready', function () {
    if (infowindow.get("isdomready")) {
        // show the infowindow by setting css 
        jQuery('.infowin-content').css('visibility', 'visible');               
    }
    else {
        // trigger a domready event again.
        google.maps.event.trigger(infowindow, 'content_changed');
        infowindow.set("isdomready", true);
    }
}

Я пытался просто сделать setTimeout (/ * show infowin callback * /, 100), но иногда это не сработало, если контент (например, изображения) загружался слишком долго.

Надеюсь, это работает для вас.