Google Maps API v3: InfoWindow неправильно определяет размер

Question 1

Похоже, что мое InfoWindow, когда вы нажимаете на значок дома в моих Google Maps v3, неправильно автоматически подстраивается под содержимое InfoWindow.

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

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

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

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

ОБНОВИТЬ

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

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

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

Question 2

Добавьте div в информационное окно

<div id=\"mydiv\">YourContent</div>

Затем установите размер с помощью css. работает на меня. При этом предполагается, что все информационные окна одинакового размера!

#mydiv{
width:500px;
height:100px;
}

Question 3

Краткий ответ: установите свойство maxWidth options в конструкторе . Да, даже если установка максимальной ширины была не тем, что вы хотели.

Более длинная история: при переносе карты v2 на v3 я точно увидел описанную проблему. Окна различались по ширине и высоте, некоторые из них имели вертикальные полосы прокрутки, а некоторые нет. Некоторые из них были <br /> встроены в данные, но по крайней мере один с таким размером в порядке.

Я не думал, что свойство InfoWindowsOptions.maxWidth имеет значение, так как я не заботился об ограничении ширины ... но, установив его с помощью конструктора InfoWindow, я получил то, что хотел, и окна теперь автоматически изменяются (по вертикали) и показать все содержимое без вертикальной полосы прокрутки. Для меня это не имеет большого смысла, но работает!

См .: http://fortboise.org/maps/sailing-spots.html

Question 4

Вы должны передать контент в InfoWindow из объекта jQuery.

var $infoWindowContent = $("<div class='infowin-content'>Content goes here</div>");
var infoWindow = new google.maps.InfoWindow();
infowindow.setContent($infoWindowContent[0]);

Question 5

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

меня устраивает

Question 6

РЕДАКТИРОВАТЬ (выделиться): Поверьте мне, из сотни других ответов на этот вопрос это единственный правильный, который также объясняет, ПОЧЕМУ это происходит.

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

Во-первых, вам не нужно указывать width'sилиheight's что-либо, чтобы ваше информационное окно отображалось без полос прокрутки, хотя иногда вы можете случайно заставить его работать, сделав это (но в конечном итоге это не удастся).

Во-вторых, в Google Maps API infoWindow's нет ошибки прокрутки, просто очень сложно найти правильную информацию о том, как они работают. Ну вот и он:

Когда вы говорите API Карт Google открываться в infoWindow следующим образом:

var infoWindow = new google.maps.InfoWindow({...});
....
infoWindow.setContent('<h1>Hello!</h1><p>And welcome to my infoWindow!</p>');
infoWindow.open(map);

Для всех намерений и целей карты Google временно помещают divв конец вашей страницы (на самом деле он создает detached DOM tree- но концептуально легче понять, если я скажу, что вы воображаете, что divсущество помещается в конец вашей страницы ) с HTML-контентом, который вы указано. Затем он измеряет этот div (что означает, что в этом примере все правила CSS в моем документе применяются к нему h1и pк нему будут применяться теги), чтобы получить его widthи height. Затем Google берет это div, присваивает ему измерения, которые он получил, когда он был добавлен на вашу страницу, и помещает его на карту в указанном вами месте.

Вот где проблема возникает у многих людей - у них может быть HTML, который выглядит так:

<body>
 <div id="map-canvas"><!-- google map goes here --></div>
</body>

и, по какой-то причине, CSS, который выглядит так:

h1 { font-size: 18px; }
#map-canvas h1 { font-size: 32px; }

Вы видите проблему? Когда API пытается сделать измерения для вашего infoWindow(непосредственно перед отображением его), то h1часть содержимого будет иметь размер 18px(так как временное «измерение ДИВ» добавляются к телу), но когда API фактически помещает infoWindowна карту, #map-canvas h1селектор будет иметь приоритет, в результате чего размер шрифта будет сильно отличаться от того, что было, когда API измерял размер, infoWindowи в этом случае вы всегда будете получать полосы прокрутки.

В зависимости от конкретной причины, по которой у вас есть полосы прокрутки, могут быть более разные нюансы infoWindow, но причина этого заключается в следующем:

Те же правила CSS должны применяться к содержимому внутри вашего infoWindow сайта независимо от того, где в разметке отображается фактический элемент HTML. В противном случае вы гарантированно получите полосы прокрутки в своем infoWindow.

Я всегда делаю что-то вроде этого:

infoWindow.setContent('<div class="info-window-content">...your content here...</div>');

и в моем CSS:

.info-window-content { ... }
.info-window-content h1 { .... }
.info-window-content p { ... }
etc...

Таким образом, независимо от того, где API добавляет свои измерения div- перед закрытием bodyили внутри #map-canvas, правила CSS, применяемые к нему, всегда будут одинаковыми.

РЕДАКТИРОВАТЬ RE: Семейства шрифтов

Google, похоже, активно работает над проблемой загрузки шрифтов (описанной ниже), и функциональность изменилась совсем недавно, поэтому вы можете или не можете видеть загрузку шрифта Roboto при infoWindowпервом открытии, в зависимости от версии API, который вы используете. Есть открытый отчет об ошибке (хотя в журнале изменений этот отчет об ошибке уже отмечен как исправленный), который показывает, что Google по-прежнему испытывает трудности с этой проблемой.

ЕЩЕ ОДНО: ПОСМОТРЕТЬ СВОИ СЕМЬИ ШРИФТОВ !!!

В последнем воплощении API Google попытался проявить смекалку и обернуть его содержимое infoWindow во что-то, на что можно было бы нацелить селектор CSS - .gm-style-iw. Для людей, которые не понимали правил, которые я объяснил выше, это не очень помогло, а в некоторых случаях стало еще хуже. Полосы прокрутки почти всегда появляются при первом infoWindowоткрытии, но если вы открываете их infoWindowснова, даже с тем же содержимым полосы прокрутки исчезнут. Серьезно, если бы вы не были сбиты с толку раньше, вы бы потеряли рассудок. Вот что происходило:

Если вы посмотрите на стили, которые Google загружает на страницу при загрузке API, вы увидите следующее:

.gm-style {
     font-family: Roboto,Arial,sans-serif
 ...
}

Итак, Google хотел сделать свои карты более последовательными, всегда заставляя их использовать семейство Robotoшрифтов. Проблема в том, что для большинства людей до того, как вы открыли infoWindow, браузер еще не загрузил Robotoшрифт (потому что ничто другое на вашей странице не использовало его, поэтому браузер достаточно умен, чтобы знать, что ему не нужно загружать этот шрифт). Загрузка этого шрифта происходит не мгновенно, хотя и очень быстро. В первый раз, когда вы открываете файл, infoWindowи API добавляет его divс вашим infoWindowсодержимым в тело для измерения, он начинает загрузку Robotoшрифта, но ваши infoWindow'sизмерения выполняются, и окно помещается на карту до Robotoзавершения загрузки. Результатом довольно часто былinfoWindowчьи измерения были выполнены, когда его содержимое отображалось с использованиемArial илиsans-serifшрифт, но когда он был отображен на карте (иRobotoзавершил загрузку) его содержимое отображалось шрифтом другого размера - и вуаля - полосы прокрутки появляются при первом открытии файла infoWindow. Откройте то же самое infoWindowво второй раз - в этот момент Robotoфайл был загружен и будет использоваться, когда API измеряет infoWindowконтент, и вы не увидите полос прокрутки.

Question 7

Я попробовал каждый из перечисленных ответов. У меня ничего не работало. Это, наконец, исправило его НАСТОЯЩИЙ. Код , который я унаследовала имел DIVобертку все <h#>и <p>записи. Я просто принудительно использовал какой-то «стиль» в том же DIV, принимая во внимание желаемую максимальную ширину, добавил изменение высоты строки на всякий случай (чье-то исправление) и мое собственное white-space: nowrap, что затем заставило автоматическое переполнение внести правильные настройки. Без полосы прокрутки, без усечения и без проблем!

html = '<div class="map-overlay" style="max-width: 400px;
                                        line-height: normal;
                                        white-space: nowrap;
                                        overflow: auto;
                                       ">';

Question 8

Я знаю, что это старый поток, но я столкнулся с той же проблемой. Я имел <h2>и <p>элементы в InfoWindow, и они оба имели нижние поля. Я удалил поля, и размер InfoWindow был правильным. Ни одно из других предложенных исправлений не помогло. Подозреваю, что при расчете размера InfoWindow поля не учитываются.

Question 9

Собираюсь добавить свой ответ в список, поскольку НИ ОДИН из них не устранил мою проблему. Я закончил тем, что обернул свой контент в div, дал этому div класс и указал min-widthв div, И указавmaxWidth в infoWindow, И они оба должны были быть одинакового размера, иначе ширина или высота будут переполняться на коробках с неправильным количеством содержимого.

Javascript:

// Set up the content for the info box
var content = "<div class='infowindow-content'>" + content + "</div>";

// create a map info box
var infoWindow = new google.maps.InfoWindow({
    maxWidth: 350,
    content: content
});

CSS:

div.infowindow-content {
    min-width: 350px;
}

Question 10

Я пробовал все эти решения, и ни одно не помогло. После некоторых проб и ошибок я понял это.

<style type="text/css">
#map_canvas {
    line-height:normal;
}
</style>

Установите line-height: normal для div холста карты.

Question 11

Похоже, что проблема связана с веб-шрифтом Roboto.

Информационное окно отображается со встроенными свойствами ширины и высоты в зависимости от предоставленного содержимого. Однако он не рассчитывается с уже отображенным / загруженным веб-шрифтом. После того, как шрифт отображается ПОСЛЕ того, как вся карта выводится на экран, появляются полосы прокрутки из-за свойств «overflow: auto», встроенных в DIV окна.

Решение, которое я нашел для работы, - это обернуть содержимое в DIV, а затем применить CSS для переопределения веб-шрифта:

.gmap_infowin {
    font-family: sans-serif !important;
    font-weight: normal !important;
}

<div class="gmap_infowin">Your info window content here.</div>

Question 12

Как ни странно, а следующий код исправит полосу прокрутки WIDTH:

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

}

Это потребовалось для исправления полосы прокрутки ВЫСОТА:

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

РЕДАКТИРОВАТЬ: добавление пробела: nowrap; использование любого стиля может исправить проблему с интервалом, которая, кажется, сохраняется при удалении полос прокрутки. Отличный момент, Натан.

Question 13

У меня это работает. Поместите 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.

Question 14

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

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

Question 15

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

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

Question 16

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

Question 17

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

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

Question 18

Используйте событие 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), но иногда это не помогало, если контент (например, изображения) загружался слишком долго.

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

Question 19

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

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

Question 20

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

Question 21

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

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

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

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

Question 22

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

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

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

Это уродливо, но работает.

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

Question 23

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

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

И в моем style.css

div#fix_height{
    padding: 5px;
}

Question 24

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

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

Question 25

Мой ответ - добавить слушателя (с помощью 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);
            });

Question 26

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

white-space: nowrap;

Question 27

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

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

this.infowindow = new google.maps.InfoWindow({ maxWidth: 200 });
Оберните содержимое информационного окна

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

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

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

Question 28

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

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

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

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

Удалите все правила стиля display: inline-block из всего, что находится внутри содержимого информационного окна (я заменил на display: block) - у меня возникла идея попробовать это из потока (который я больше не могу найти), где у кого-то было то же самое проблема с IE6.
Передайте содержимое как узел DOM, а не как строку. Я использую jQuery, поэтому я мог бы сделать это, заменив: infowindow.setContent(infoWindowDiv.html());на infowindow.setContent($(infoWindowDiv.html())[0]); Это оказалось для меня самым простым, но есть много других способов получить тот же результат.
Используйте хак "setMaxWidth" - установите опцию MaxWidth в конструкторе - установка опции позже не работает. Если вам не нужна максимальная ширина, просто установите очень большое число.

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

Question 29

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

Мое решение заключалось в том, чтобы установить содержимое, открыть окно, а затем, когда domreadyсобытие будет запущено, установить heightсвойство CSS для содержимого на любую высоту, а затем заставить 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);

(Я опубликовал то же решение по аналогичному вопросу. Как мне заставить Google-Maps InfoWindow изменить размер, чтобы он соответствовал содержимому, помещенному в него? )

Question 30

Потеряв время и некоторое время почитав, я просто захотел чего-то простого, этот CSS работал в соответствии с моими требованиями.

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

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

Question 31

Что ж, это тот, который помог мне:

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

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

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

Answer 1

83

Похоже, что мое InfoWindow, когда вы нажимаете на значок дома в моих Google Maps v3, неправильно автоматически подстраивается под содержимое InfoWindow.

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

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

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

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

ОБНОВИТЬ

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

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

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

javascript html css google-maps Яков Т.
источник

лучше скопировать соответствующий код в свой вопрос. В противном случае этот вопрос станет бессмысленным при изменении кода на вашем сайте.

Джонатан Фингленд,

Ну в этом весь смысл. Насколько я понимаю, API Карт Google v3 должен автоматически изменять размер независимо от моего CSS ... но это не так. Но я все

равно отправлю

7

Я знаю, что это устарело, но на тот случай, если кто-то доберется сюда и попробует все, но проблема все равно останется (как у меня): максимальная высота информационных окон пропорциональна размерам вашей карты. Это меньше, чем v2. Поэтому, если вы обновляетесь с v2 до v3 и имеете эту проблему, это может быть из-за этого. Либо сделайте контент короче, либо карту длиннее, либо вернитесь к версии 2.

Кэсси

Answer 2

лучше скопировать соответствующий код в свой вопрос. В противном случае этот вопрос станет бессмысленным при изменении кода на вашем сайте.

Джонатан Фингленд,

Answer 3

Ну в этом весь смысл. Насколько я понимаю, API Карт Google v3 должен автоматически изменять размер независимо от моего CSS ... но это не так. Но я все

равно отправлю

Answer 4

7

Я знаю, что это устарело, но на тот случай, если кто-то доберется сюда и попробует все, но проблема все равно останется (как у меня): максимальная высота информационных окон пропорциональна размерам вашей карты. Это меньше, чем v2. Поэтому, если вы обновляетесь с v2 до v3 и имеете эту проблему, это может быть из-за этого. Либо сделайте контент короче, либо карту длиннее, либо вернитесь к версии 2.

Кэсси

Answer 5

32

Добавьте div в информационное окно

<div id=\"mydiv\">YourContent</div>

Затем установите размер с помощью css. работает на меня. При этом предполагается, что все информационные окна одинакового размера!

#mydiv{
width:500px;
height:100px;
}

Гарри
источник

Точно. Одинакового размера или вы создаете в своем CSS достаточно классов с разными размерами.

Элайджа Саункин,

в зависимости от того, как вы работаете со своими информационными окнами, может быть безопаснее использовать класс, а не идентификатор, чтобы избежать дублирования идентификаторов, плавающих на одной странице, например <div class=\"mydiv\">YourContent</div>и.mydiv{ width:500px; height:100px; }

StackExchange What The Heck

Он работает на настольных компьютерах, но не на мобильных устройствах (Android) /

user2060451

Answer 6

Точно. Одинакового размера или вы создаете в своем CSS достаточно классов с разными размерами.

Элайджа Саункин,

Answer 7

в зависимости от того, как вы работаете со своими информационными окнами, может быть безопаснее использовать класс, а не идентификатор, чтобы избежать дублирования идентификаторов, плавающих на одной странице, например <div class=\"mydiv\">YourContent</div>и.mydiv{ width:500px; height:100px; }

StackExchange What The Heck

Answer 8

Он работает на настольных компьютерах, но не на мобильных устройствах (Android) /

user2060451

Answer 9

31

Краткий ответ: установите свойство maxWidth options в конструкторе . Да, даже если установка максимальной ширины была не тем, что вы хотели.

Более длинная история: при переносе карты v2 на v3 я точно увидел описанную проблему. Окна различались по ширине и высоте, некоторые из них имели вертикальные полосы прокрутки, а некоторые нет. Некоторые из них были <br /> встроены в данные, но по крайней мере один с таким размером в порядке.

Я не думал, что свойство InfoWindowsOptions.maxWidth имеет значение, так как я не заботился об ограничении ширины ... но, установив его с помощью конструктора InfoWindow, я получил то, что хотел, и окна теперь автоматически изменяются (по вертикали) и показать все содержимое без вертикальной полосы прокрутки. Для меня это не имеет большого смысла, но работает!

См .: http://fortboise.org/maps/sailing-spots.html

Fortboise
источник

2

В случае, если кто-то еще пытается установить maxWidthпроцентное значение, карты Google распознают float как процент от родительского и преобразуют его в пиксельный эквивалент: declare {"maxWidth":0.25}, родительский элемент имеет ширину 1000 пикселей, InfoWindow будет иметь расширение width: 250px. Я не думаю, что можно заставить ширину InfoWindow оставаться в процентах (значение maxWidthдолжно быть числом, поэтому {"maxWidth":"25%"}не будет работать и {"maxWidth":25%}будет обрабатываться как неопределенный модуль 25 и вызывает синтаксическую ошибку).

jacob

Интересно. В текущей документации Google указано, что свойство google.maps.InfoWindowOptions.maxWidth является «числом», и мы вывели единицы измерения в пикселях. Нет причин, по которым синтаксический анализатор не мог бы также принять десятичное число и интерпретировать его как дробь ... и оставить это как недокументированную «особенность». За исключением, может быть, здравого смысла.

fortboise

1

Хорошо, +1 за отличную работу, но почему я всегда оказываюсь на этой странице паруса при исследовании функциональности gMap.

Билл Бланкеншип

14

Возможно, это сработало в 2010 году, но не помогает в 2014 году.

Саймон Ист

1

@Simon, новый год, новые проблемы ... какие-нибудь решения по исправлению на этот раз?

Фил Купер

Answer 10

2

В случае, если кто-то еще пытается установить maxWidthпроцентное значение, карты Google распознают float как процент от родительского и преобразуют его в пиксельный эквивалент: declare {"maxWidth":0.25}, родительский элемент имеет ширину 1000 пикселей, InfoWindow будет иметь расширение width: 250px. Я не думаю, что можно заставить ширину InfoWindow оставаться в процентах (значение maxWidthдолжно быть числом, поэтому {"maxWidth":"25%"}не будет работать и {"maxWidth":25%}будет обрабатываться как неопределенный модуль 25 и вызывает синтаксическую ошибку).

jacob

Answer 11

Интересно. В текущей документации Google указано, что свойство google.maps.InfoWindowOptions.maxWidth является «числом», и мы вывели единицы измерения в пикселях. Нет причин, по которым синтаксический анализатор не мог бы также принять десятичное число и интерпретировать его как дробь ... и оставить это как недокументированную «особенность». За исключением, может быть, здравого смысла.

fortboise

Answer 12

1

Хорошо, +1 за отличную работу, но почему я всегда оказываюсь на этой странице паруса при исследовании функциональности gMap.

Билл Бланкеншип

Answer 13

14

Возможно, это сработало в 2010 году, но не помогает в 2014 году.

Саймон Ист

Answer 14

1

@Simon, новый год, новые проблемы ... какие-нибудь решения по исправлению на этот раз?

Фил Купер

Answer 15

25

Вы должны передать контент в InfoWindow из объекта jQuery.

var $infoWindowContent = $("<div class='infowin-content'>Content goes here</div>");
var infoWindow = new google.maps.InfoWindow();
infowindow.setContent($infoWindowContent[0]);

Барис Айдыноглу
источник

4

Хорошо, это работает нормально, большое спасибо ... Теперь я хочу знать, почему :)

Джереми Ф.

2

Это одно из самых странных исправлений, которые я когда-либо видел. Ни один из других хаков для этого вопроса не помог мне, кроме этого. Невероятно.

monoceres

3

По какой-то причине кажется, что API карт не помещает overflow: autoInfoWindow DIV, когда вы передаете узлы DOM вместо строки. Это решает проблему, если контент выходит только на 1-2 пикселя. К сожалению, это означает, что более длинный контент фактически выходит за пределы InfoWindow вместо добавления полос прокрутки.

Саймон Ист

Хотя это действительно работает, довольно неприятно просить людей включить jQuery на страницу просто для infoWindow'sправильного отображения. Полный ответ о том, почему это работает, указан в моем ответе - jQueryсоздает отдельное дерево DOM, которое заставляет контент правильно отображаться, и его размер точно определяется до того, как Google попытается разместить infoWindowна карте

Адам

Answer 16

4

Хорошо, это работает нормально, большое спасибо ... Теперь я хочу знать, почему :)

Джереми Ф.

Answer 17

2

Это одно из самых странных исправлений, которые я когда-либо видел. Ни один из других хаков для этого вопроса не помог мне, кроме этого. Невероятно.

monoceres

Answer 18

3

По какой-то причине кажется, что API карт не помещает overflow: autoInfoWindow DIV, когда вы передаете узлы DOM вместо строки. Это решает проблему, если контент выходит только на 1-2 пикселя. К сожалению, это означает, что более длинный контент фактически выходит за пределы InfoWindow вместо добавления полос прокрутки.

Саймон Ист

Answer 19

Хотя это действительно работает, довольно неприятно просить людей включить jQuery на страницу просто для infoWindow'sправильного отображения. Полный ответ о том, почему это работает, указан в моем ответе - jQueryсоздает отдельное дерево DOM, которое заставляет контент правильно отображаться, и его размер точно определяется до того, как Google попытается разместить infoWindowна карте

Адам

Answer 20

22

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

меня устраивает

Реджиш Прарат
источник

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

Саймон Ист

Не идеально подходит для контента разной длины, но мой контент практически одинаков для каждого указателя, применяя ширину! Important и высоту! Important, было для меня достаточным решением!

Джимбо Джонс

Answer 21

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

Саймон Ист

Answer 22

Не идеально подходит для контента разной длины, но мой контент практически одинаков для каждого указателя, применяя ширину! Important и высоту! Important, было для меня достаточным решением!

Джимбо Джонс

Answer 23

РЕДАКТИРОВАТЬ (выделиться): Поверьте мне, из сотни других ответов на этот вопрос это единственный правильный, который также объясняет, ПОЧЕМУ это происходит.

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

Во-первых, вам не нужно указывать width'sилиheight's что-либо, чтобы ваше информационное окно отображалось без полос прокрутки, хотя иногда вы можете случайно заставить его работать, сделав это (но в конечном итоге это не удастся).

Во-вторых, в Google Maps API infoWindow's нет ошибки прокрутки, просто очень сложно найти правильную информацию о том, как они работают. Ну вот и он:

Когда вы говорите API Карт Google открываться в infoWindow следующим образом:

var infoWindow = new google.maps.InfoWindow({...});
....
infoWindow.setContent('<h1>Hello!</h1><p>And welcome to my infoWindow!</p>');
infoWindow.open(map);

Для всех намерений и целей карты Google временно помещают divв конец вашей страницы (на самом деле он создает detached DOM tree- но концептуально легче понять, если я скажу, что вы воображаете, что divсущество помещается в конец вашей страницы ) с HTML-контентом, который вы указано. Затем он измеряет этот div (что означает, что в этом примере все правила CSS в моем документе применяются к нему h1и pк нему будут применяться теги), чтобы получить его widthи height. Затем Google берет это div, присваивает ему измерения, которые он получил, когда он был добавлен на вашу страницу, и помещает его на карту в указанном вами месте.

Вот где проблема возникает у многих людей - у них может быть HTML, который выглядит так:

<body>
 <div id="map-canvas"><!-- google map goes here --></div>
</body>

и, по какой-то причине, CSS, который выглядит так:

h1 { font-size: 18px; }
#map-canvas h1 { font-size: 32px; }

Вы видите проблему? Когда API пытается сделать измерения для вашего infoWindow(непосредственно перед отображением его), то h1часть содержимого будет иметь размер 18px(так как временное «измерение ДИВ» добавляются к телу), но когда API фактически помещает infoWindowна карту, #map-canvas h1селектор будет иметь приоритет, в результате чего размер шрифта будет сильно отличаться от того, что было, когда API измерял размер, infoWindowи в этом случае вы всегда будете получать полосы прокрутки.

В зависимости от конкретной причины, по которой у вас есть полосы прокрутки, могут быть более разные нюансы infoWindow, но причина этого заключается в следующем:

Те же правила CSS должны применяться к содержимому внутри вашего infoWindow сайта независимо от того, где в разметке отображается фактический элемент HTML. В противном случае вы гарантированно получите полосы прокрутки в своем infoWindow.

Я всегда делаю что-то вроде этого:

infoWindow.setContent('<div class="info-window-content">...your content here...</div>');

и в моем CSS:

.info-window-content { ... }
.info-window-content h1 { .... }
.info-window-content p { ... }
etc...

Таким образом, независимо от того, где API добавляет свои измерения div- перед закрытием bodyили внутри #map-canvas, правила CSS, применяемые к нему, всегда будут одинаковыми.

РЕДАКТИРОВАТЬ RE: Семейства шрифтов

Google, похоже, активно работает над проблемой загрузки шрифтов (описанной ниже), и функциональность изменилась совсем недавно, поэтому вы можете или не можете видеть загрузку шрифта Roboto при infoWindowпервом открытии, в зависимости от версии API, который вы используете. Есть открытый отчет об ошибке (хотя в журнале изменений этот отчет об ошибке уже отмечен как исправленный), который показывает, что Google по-прежнему испытывает трудности с этой проблемой.

ЕЩЕ ОДНО: ПОСМОТРЕТЬ СВОИ СЕМЬИ ШРИФТОВ !!!

В последнем воплощении API Google попытался проявить смекалку и обернуть его содержимое infoWindow во что-то, на что можно было бы нацелить селектор CSS - .gm-style-iw. Для людей, которые не понимали правил, которые я объяснил выше, это не очень помогло, а в некоторых случаях стало еще хуже. Полосы прокрутки почти всегда появляются при первом infoWindowоткрытии, но если вы открываете их infoWindowснова, даже с тем же содержимым полосы прокрутки исчезнут. Серьезно, если бы вы не были сбиты с толку раньше, вы бы потеряли рассудок. Вот что происходило:

Если вы посмотрите на стили, которые Google загружает на страницу при загрузке API, вы увидите следующее:

.gm-style {
     font-family: Roboto,Arial,sans-serif
 ...
}

Итак, Google хотел сделать свои карты более последовательными, всегда заставляя их использовать семейство Robotoшрифтов. Проблема в том, что для большинства людей до того, как вы открыли infoWindow, браузер еще не загрузил Robotoшрифт (потому что ничто другое на вашей странице не использовало его, поэтому браузер достаточно умен, чтобы знать, что ему не нужно загружать этот шрифт). Загрузка этого шрифта происходит не мгновенно, хотя и очень быстро. В первый раз, когда вы открываете файл, infoWindowи API добавляет его divс вашим infoWindowсодержимым в тело для измерения, он начинает загрузку Robotoшрифта, но ваши infoWindow'sизмерения выполняются, и окно помещается на карту до Robotoзавершения загрузки. Результатом довольно часто былinfoWindowчьи измерения были выполнены, когда его содержимое отображалось с использованиемArial илиsans-serifшрифт, но когда он был отображен на карте (иRobotoзавершил загрузку) его содержимое отображалось шрифтом другого размера - и вуаля - полосы прокрутки появляются при первом открытии файла infoWindow. Откройте то же самое infoWindowво второй раз - в этот момент Robotoфайл был загружен и будет использоваться, когда API измеряет infoWindowконтент, и вы не увидите полос прокрутки.

Answer 24

Вот некоторые важные детали, Адам, и да, я обнаружил похожие вещи на вас. Однако ошибка, о которой сообщалось в Google , действительно, похоже, все еще возникает даже с системными шрифтами и без дочерних селекторов CSS. См. Этот пример (есть полоса прокрутки в Chrome 40 Win).

Саймон Ист

Answer 25

@Simon - вы правы, отправленная вами ссылка является ошибкой (крайний случай, но все же ошибка). Я предполагаю, что> 98% случаев, когда люди сообщают, что их информация есть у Windows, и они не знают почему - это из-за проблем, рассмотренных в этом ответе.

Адам

Answer 26

Адам. Большое спасибо за этот ответ. Вы избавили меня от ненужных взломов!

Абрам

Answer 27

Я попробовал каждый из перечисленных ответов. У меня ничего не работало. Это, наконец, исправило его НАСТОЯЩИЙ. Код , который я унаследовала имел DIVобертку все <h#>и <p>записи. Я просто принудительно использовал какой-то «стиль» в том же DIV, принимая во внимание желаемую максимальную ширину, добавил изменение высоты строки на всякий случай (чье-то исправление) и мое собственное white-space: nowrap, что затем заставило автоматическое переполнение внести правильные настройки. Без полосы прокрутки, без усечения и без проблем!

html = '<div class="map-overlay" style="max-width: 400px;
                                        line-height: normal;
                                        white-space: nowrap;
                                        overflow: auto;
                                       ">';

Answer 28

7

Вот этот! Я безуспешно перебирал все ответы, пока не добрался сюда. В моем случае white-space: nowrapмагия была в том, что другие стили были не нужны. Ура!

Ксавье Холт

Answer 29

Это действительно работает, однако некоторые информационные окна приходилось нажимать более одного раза ... Моим окончательным решением было объединить этот ответ с Concept211 , добавив font-family: sans-serif !important; font-weight: normal !important;его в CSS.

Sparky

Answer 30

К сожалению, если у вас есть длинные строки, они будут обрезаны вместо переноса. Не идеальное решение, если вы не знаете, что все ваши строки короткие.

Саймон Ист

Answer 31

10

Я знаю, что это старый поток, но я столкнулся с той же проблемой. Я имел <h2>и <p>элементы в InfoWindow, и они оба имели нижние поля. Я удалил поля, и размер InfoWindow был правильным. Ни одно из других предложенных исправлений не помогло. Подозреваю, что при расчете размера InfoWindow поля не учитываются.

Майк
источник

1

У меня была эта проблема, и ни одно из других исправлений не помогло, но это сработало. Спасибо :)

Ian Dunn

Это относится ко всем полям, используемым внутри окна.

ZMorek 03

2

У меня все еще были проблемы, но я просто завернул все в <div style='overflow:hidden;'></div>Looks good.

ZMorek 03

Answer 32

1

У меня была эта проблема, и ни одно из других исправлений не помогло, но это сработало. Спасибо :)

Ian Dunn

Answer 33

Это относится ко всем полям, используемым внутри окна.

ZMorek 03

Answer 34

2

У меня все еще были проблемы, но я просто завернул все в <div style='overflow:hidden;'></div>Looks good.

ZMorek 03

Answer 35

10

Собираюсь добавить свой ответ в список, поскольку НИ ОДИН из них не устранил мою проблему. Я закончил тем, что обернул свой контент в div, дал этому div класс и указал min-widthв div, И указавmaxWidth в infoWindow, И они оба должны были быть одинакового размера, иначе ширина или высота будут переполняться на коробках с неправильным количеством содержимого.

Javascript:

// Set up the content for the info box
var content = "<div class='infowindow-content'>" + content + "</div>";

// create a map info box
var infoWindow = new google.maps.InfoWindow({
    maxWidth: 350,
    content: content
});

CSS:

div.infowindow-content {
    min-width: 350px;
}

Джен
источник

2

Установив min-widthна содержание было единственное , что работал для меня тоже. Однако не нужно было устанавливать maxWidthв infoWindow.

Марк Парнелл

1

@MarkParnell = обязательно тщательно протестируйте. У меня возникали проблемы, когда у меня было больше определенного количества текста заданной ширины! Если вы знаете, какой будет контент, тогда ничего страшного :)

Джен

Большое вам спасибо .. это мне тоже помогло. В мобильном представлении я дал maxWidth: 350. все же он принимал какое-то случайное значение. с помощью min-width он отлично работает.

DShah

Answer 36

2

Установив min-widthна содержание было единственное , что работал для меня тоже. Однако не нужно было устанавливать maxWidthв infoWindow.

Марк Парнелл

Answer 37

1

@MarkParnell = обязательно тщательно протестируйте. У меня возникали проблемы, когда у меня было больше определенного количества текста заданной ширины! Если вы знаете, какой будет контент, тогда ничего страшного :)

Джен

Answer 38

Большое вам спасибо .. это мне тоже помогло. В мобильном представлении я дал maxWidth: 350. все же он принимал какое-то случайное значение. с помощью min-width он отлично работает.

DShah

Answer 39

8

Я пробовал все эти решения, и ни одно не помогло. После некоторых проб и ошибок я понял это.

<style type="text/css">
#map_canvas {
    line-height:normal;
}
</style>

Установите line-height: normal для div холста карты.

Ник
источник

да! Высота строки - это то, что исправлено для меня. больше ничего не работало. в частности, я установил высоту строки в моей таблице стилей на {line-height: 1.3; }. Я изменил его на {line-height: 1.3em}, и проблема была решена.

tbradley22,

или, в качестве альтернативы, вы можете просто установить высоту строки div контейнера карты на нормальную, как указано выше.

tbradley22

#map_canvasЯ не вижу ничего в Google Maps v3. Это должно быть из старого v2.

Саймон Ист

@Simon #map_canvas- это div, который вы используете для карты. Это может быть любое имя, которое вы хотите.

Ник

К сожалению, это не помогает. Эта скрипка по-прежнему отображает полосу прокрутки в Chrome: jsfiddle.net/simoneast/dckxp62o

Саймон Восток

Answer 40

да! Высота строки - это то, что исправлено для меня. больше ничего не работало. в частности, я установил высоту строки в моей таблице стилей на {line-height: 1.3; }. Я изменил его на {line-height: 1.3em}, и проблема была решена.

tbradley22,

Answer 41

или, в качестве альтернативы, вы можете просто установить высоту строки div контейнера карты на нормальную, как указано выше.

tbradley22

Answer 42

#map_canvasЯ не вижу ничего в Google Maps v3. Это должно быть из старого v2.

Саймон Ист

Answer 43

@Simon #map_canvas- это div, который вы используете для карты. Это может быть любое имя, которое вы хотите.

Ник

Answer 44

К сожалению, это не помогает. Эта скрипка по-прежнему отображает полосу прокрутки в Chrome: jsfiddle.net/simoneast/dckxp62o

Саймон Восток

Answer 45

8

Похоже, что проблема связана с веб-шрифтом Roboto.

Информационное окно отображается со встроенными свойствами ширины и высоты в зависимости от предоставленного содержимого. Однако он не рассчитывается с уже отображенным / загруженным веб-шрифтом. После того, как шрифт отображается ПОСЛЕ того, как вся карта выводится на экран, появляются полосы прокрутки из-за свойств «overflow: auto», встроенных в DIV окна.

Решение, которое я нашел для работы, - это обернуть содержимое в DIV, а затем применить CSS для переопределения веб-шрифта:

.gmap_infowin {
    font-family: sans-serif !important;
    font-weight: normal !important;
}

<div class="gmap_infowin">Your info window content here.</div>

Концепция211
источник

это решение работает для меня. Также работает скрытие прокрутки: .gm-style-iw {overflow: hidden! Important;}, но это скроет часть содержимого в infoWindow

Imaginary

+1 да! Но я объединил этот ответ с user2656824 .

Sparky

+1, потому что это единственный ответ, который, кажется, наконец подтверждает тот факт, что это связано с проблемами шрифта Roboto. Я не удивлюсь, если другие шрифты тоже будут отображаться неправильно. проблема в том, что .gm-style-iw вычисляет немного меньшую высоту, чем необходимо, вероятно, из-за округления с плавающей запятой. действительно единственный разумный вариант - неудачный .gm-style-iw {overflow: hidden! important;}. конечно, это становится бесполезным, если вам действительно нужно прокручивать

страницу

Шрифт Roboto действительно появляется , чтобы вызвать этот вопрос иногда , но это происходит также с Arial и по умолчанию шрифтов. Если вы посмотрите на эту скрипку с предложенным вами исправлением в Chrome 38 в Windows, у нее все еще есть неприятная полоса прокрутки: jsfiddle.net/simoneast/dckxp62o/2

Саймон Восток

Answer 46

это решение работает для меня. Также работает скрытие прокрутки: .gm-style-iw {overflow: hidden! Important;}, но это скроет часть содержимого в infoWindow

Imaginary

Answer 47

+1 да! Но я объединил этот ответ с user2656824 .

Sparky

Answer 48

+1, потому что это единственный ответ, который, кажется, наконец подтверждает тот факт, что это связано с проблемами шрифта Roboto. Я не удивлюсь, если другие шрифты тоже будут отображаться неправильно. проблема в том, что .gm-style-iw вычисляет немного меньшую высоту, чем необходимо, вероятно, из-за округления с плавающей запятой. действительно единственный разумный вариант - неудачный .gm-style-iw {overflow: hidden! important;}. конечно, это становится бесполезным, если вам действительно нужно прокручивать

страницу

Answer 49

Шрифт Roboto действительно появляется , чтобы вызвать этот вопрос иногда , но это происходит также с Arial и по умолчанию шрифтов. Если вы посмотрите на эту скрипку с предложенным вами исправлением в Chrome 38 в Windows, у нее все еще есть неприятная полоса прокрутки: jsfiddle.net/simoneast/dckxp62o/2

Саймон Восток

Answer 50

Как ни странно, а следующий код исправит полосу прокрутки WIDTH:

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

}

Это потребовалось для исправления полосы прокрутки ВЫСОТА:

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

РЕДАКТИРОВАТЬ: добавление пробела: nowrap; использование любого стиля может исправить проблему с интервалом, которая, кажется, сохраняется при удалении полос прокрутки. Отличный момент, Натан.

Answer 51

Я думаю, моя проблема была вызвана переносом тега h4. Когда я добавил ваше предложение, он удалил полосы прокрутки, но в нижней части окна остался небольшой кусок. Когда я добавил white-space: nowrap; на h4 все стало лучше. Благодаря!

Nate Bunney,

Answer 52

У меня это работает. Поместите 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 53

29

спасибо, только когда я установил свой шрифт на comic-sans, это начало работать.

bret

Answer 54

4

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

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

Vfleitao
источник

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

Пол

Answer 55

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

Пол

Answer 56

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

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

Answer 57

Иногда это помогает, но не решает проблему надежно. Если вы посмотрите на эту скрипку в Chrome 38 в Windows, у нее все еще будет уродливая полоса прокрутки: jsfiddle.net/simoneast/dckxp62o/3

Саймон Восток,

Answer 58

2

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

xsi1
источник

Точно, я не думаю, что это какой-то фиксированный размер, но дело в том, что если карта недостаточно велика (в данном случае высота), информационное окно не изменится, чтобы обернуть наш контент. Попробуйте увеличить карту и проверьте еще раз

spuas

ЭТО самый правильный ответ здесь. Слишком маленькая карта обычно является причиной проблем с размером информационного окна. Если вы хотите проверить теорию, просто осмотрите контейнер карты и увеличьте ширину и высоту.

pim

К сожалению, даже с достаточно большой картой по-прежнему возникают проблемы.

Саймон Ист

Answer 59

Точно, я не думаю, что это какой-то фиксированный размер, но дело в том, что если карта недостаточно велика (в данном случае высота), информационное окно не изменится, чтобы обернуть наш контент. Попробуйте увеличить карту и проверьте еще раз

spuas

Answer 60

ЭТО самый правильный ответ здесь. Слишком маленькая карта обычно является причиной проблем с размером информационного окна. Если вы хотите проверить теорию, просто осмотрите контейнер карты и увеличьте ширину и высоту.

pim

Answer 61

К сожалению, даже с достаточно большой картой по-прежнему возникают проблемы.

Саймон Ист

Answer 62

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

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

Answer 63

Используйте событие 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), но иногда это не помогало, если контент (например, изображения) загружался слишком долго.

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

Answer 64

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

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

Answer 65

К сожалению, это ненадежное решение. Известно, что проблема возникает также с Arial и другими стандартными шрифтами.

Саймон Ист

Answer 66

0

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

Эндрю Самуэльсен
источник

Answer 67

0

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

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

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

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

Джейсон
источник

Вы на правильном пути. Минимальная высота infoWindow вам не поможет, так как этот DIV содержится внутри DIV, который переполняется. Таким образом, установка минимальной высоты заставит его прокручиваться каждый раз.

clockworked247,

Если посмотреть на структуру DOM, то на самом деле это GRANDPARENT класса infoWindow, для которого нужно удалить переполнение. Мой код выглядит примерно так: infoCallBack = function infoCallback (infowindow, marker) {return function () {/ * здесь идет код для отображения окна, затем мое исправление переполнения * / setTimeout (function () {$ ('. Infowindow') .parent (). parent (). css ('переполнение', '');}, 25); }} Что в основном запускает исправление информационного окна через 25 мс, достаточно времени для его рендеринга.

clockworked247,

Answer 68

Вы на правильном пути. Минимальная высота infoWindow вам не поможет, так как этот DIV содержится внутри DIV, который переполняется. Таким образом, установка минимальной высоты заставит его прокручиваться каждый раз.

clockworked247,

Answer 69

Если посмотреть на структуру DOM, то на самом деле это GRANDPARENT класса infoWindow, для которого нужно удалить переполнение. Мой код выглядит примерно так: infoCallBack = function infoCallback (infowindow, marker) {return function () {/ * здесь идет код для отображения окна, затем мое исправление переполнения * / setTimeout (function () {$ ('. Infowindow') .parent (). parent (). css ('переполнение', '');}, 25); }} Что в основном запускает исправление информационного окна через 25 мс, достаточно времени для его рендеринга.

clockworked247,

Answer 70

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

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

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

Это уродливо, но работает.

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

Answer 71

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

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

И в моем style.css

div#fix_height{
    padding: 5px;
}

Answer 72

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

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

Answer 73

Мой ответ - добавить слушателя (с помощью 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 74

0

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

white-space: nowrap;

Ruggerhawn
источник

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

Саймон Ист

Answer 75

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

Саймон Ист

Answer 76

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

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

this.infowindow = new google.maps.InfoWindow({ maxWidth: 200 });
Оберните содержимое информационного окна

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

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

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

Answer 77

Это устанавливает фиксированную ширину для InfoWindow (больше не гибкую), что является одним из решений, но не идеальным.

Саймон Ист

Answer 78

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

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

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

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

Удалите все правила стиля display: inline-block из всего, что находится внутри содержимого информационного окна (я заменил на display: block) - у меня возникла идея попробовать это из потока (который я больше не могу найти), где у кого-то было то же самое проблема с IE6.
Передайте содержимое как узел DOM, а не как строку. Я использую jQuery, поэтому я мог бы сделать это, заменив: infowindow.setContent(infoWindowDiv.html());на infowindow.setContent($(infoWindowDiv.html())[0]); Это оказалось для меня самым простым, но есть много других способов получить тот же результат.
Используйте хак "setMaxWidth" - установите опцию MaxWidth в конструкторе - установка опции позже не работает. Если вам не нужна максимальная ширина, просто установите очень большое число.

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

Answer 79

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

Мое решение заключалось в том, чтобы установить содержимое, открыть окно, а затем, когда domreadyсобытие будет запущено, установить heightсвойство CSS для содержимого на любую высоту, а затем заставить 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);

(Я опубликовал то же решение по аналогичному вопросу. Как мне заставить Google-Maps InfoWindow изменить размер, чтобы он соответствовал содержимому, помещенному в него? )

Answer 80

Потеряв время и некоторое время почитав, я просто захотел чего-то простого, этот CSS работал в соответствии с моими требованиями.

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

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

Answer 81

В некоторых случаях это отключает содержимое. :-( В этой скрипке в Chrome 38 в Windows "dddd" полностью отключен: jsfiddle.net/simoneast/dckxp62o/4

Саймон Ист

Answer 82

Что ж, это тот, который помог мне:

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

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

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

Google Maps API v3: InfoWindow неправильно определяет размер

Ответы: