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

Достаточно забавно, хотя следующий код исправит полосу прокрутки WIDTH:

.gm-style-iw
{
    overflow: hidden !important;
    line-height: 1.35;

}

Это потребовалось, чтобы исправить полосу прокрутки высоты:

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

EDIT: Добавление пробела: nowrap; любой стиль может исправить проблему с пробелами, которая, кажется, сохраняется при удалении полос прокрутки. Отличный момент, Натан.

Answer 2

Это работает для меня. Положите div в setContent

sh_map.infoWindow.setContent([
  '<div id=\"mydiv\">',
  'Your content goes here',
].join(''));

Затем добавьте этот CSS на свою страницу:

<style type="text/css">
#map-canvas {
 text-align: center;
 vertical-align: middle;
}
#mydiv {
 font-family: "Comic Sans MS", cursive;
 font-size: 10px;
 border-top-width: 0px;
 border-right-width: 0px;
 border-bottom-width: 0px;
 border-left-width: 0px;
 border-top-style: none;
 border-right-style: none;
 border-bottom-style: none;
 border-left-style: none;
 letter-spacing: normal;
 text-align: center;
 vertical-align: middle;
 word-spacing: normal;
}
</style>

Например, см. http://www.student -homes-northampton.co.uk ; нажмите на ссылку под изображением дома, чтобы отобразить карту Google.

Answer 3

Это полностью решило мою проблему:

.gm-style-iw {
    overflow: visible !important;
    height: auto !important;
    width: auto !important;
}

Answer 4

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

Для меня лучше всего было переключиться на фиксированный размер шрифта внутри информационного окна - 'px' ... Я использовал ems. Устанавливая размер шрифта, мне больше не нужно было явно указывать ширину или высоту информационного окна, и полосы прокрутки исчезли навсегда.

Answer 5

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

infoWindow = new google.maps.InfoWindow()
infoWindow.open(map, marker)
infoWindow.setContent(content)

Answer 6

Также важна высота контейнера карты. Если маленькому infoWindow всегда будет на высоте 80px. В противном случае maxWidth и #innerDiv исправление работает как шарм.

Answer 7

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

<div id="fix_height">
    <h2>Title</h2>
    <p>Something</p>
</div>

И по моему style.css

div#fix_height{
    padding: 5px;
}

Answer 8

Я попробовал большинство (если не все) ответов один, но ни один из них не помог в моем случае.
Поэтому я объединил пару из них, пытаясь выяснить, какой минимум мне нужен.

И эта комбинация сработала для меня:

div.infowindow {
    font-family: Courier;
    white-space: nowrap;
    overflow: hidden; 
}

Ваш пробег может варьироваться. удачи.

Answer 9

Потеряв время и прочитав некоторое время, я просто хотел что-то простое, этот css работал для моих требований.

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

Также не является мгновенным решением, но пометка / комментирование проблемы может заставить их исправить ее, так как они считают, что она исправлена: http://code.google.com/p/gmaps-api-issues/issues/detail?id=5713

Answer 10

Для меня было неприемлемо жестко задавать ширину и высоту информационного окна или устанавливать white-space: nowrap, решение maxWidth мне не помогло, а все остальное либо не работало, либо работало иначе не подходит для моего варианта использования.

Мое решение состояло в том, чтобы установить содержимое, открыть окно, а затем при возникновении события domready установить свойство CSS height для содержимого на любую высоту, а затем заставить Google Maps изменить размер окна InfoWindow. соответственно.

infoWindow - это объект InfoWindow, $infoWindowContents - это объект Jquery с содержимым, которое я хочу поместить туда, map - это мой объект Map. marker - это маркер, по которому щелкнули.

infoWindow.setContent($infoWindowContents.get(0));

var listener = google.maps.event.addListener(infoWindow, 'domready', function() {
  // Stop listening, otherwise the listeners stack up if the window is opened again
  google.maps.event.removeListener(listener);

  // Set the height on the container to however tall the browser is currently rendering it
  $infoWindowContents.height($infoWindowContents.height());

  // Force Google Maps to recalculate the InfoWindow height
  infoWindow.setContent($infoWindowContents.get(0));
});

infoWindow.open(map, marker);

(Я отправил то же решение по аналогичному вопросу Как мне получить InfoWindow google-maps, чтобы изменить его размер, чтобы он соответствовал содержанию, которое находится внутри него? )