Похоже, что мой InfoWindow, когда вы нажимаете на значок дома на моих Google Maps v3, неправильно настроен для содержимого InfoWindow.
Он дает полосы прокрутки, когда это не должно. InfoWindow должен быть правильно автоматизирован.
Любые идеи о том, почему?
По запросу, соответствующий JavaScript, который вводит HTML для InfoWindow:
listing = '<div>Content goes here</div>';
Добавить div внутри вашего инфо-окна
<div id=\"mydiv\">YourContent</div>
Затем установите размер с помощью css. работает на меня. Это означает, что все инфо-окна имеют одинаковый размер!
#mydiv{
width:500px;
height:100px;
}
Краткий ответ: установить свойство options maxWidth в конструкторе. Да, даже если установка максимальной ширины не была тем, что вы хотели сделать.
Более длинная история: Мигрируя карту v2 в v3, я видел точно описанную проблему. Окна варьировались по ширине и высоте, а у некоторых были вертикальные полосы прокрутки, а некоторые - нет. Некоторые из них имели < br/ > вложенные в данные, но по крайней мере один с размером ОК.
Я не думал, что свойство InfoWindowsOptions.maxWidth имеет значение, так как я не хотел ограничивать ширину... но, установив его с помощью конструктора InfoWindow, я получил то, что хотел, и окна теперь автоматизируют ( вертикально) и показывать полный контент без вертикальной полосы прокрутки. Не имеет для меня большого смысла, но он работает!
Вы должны предоставить контент InfoWindow из объекта jQuery.
var $infoWindowContent = $("<div class='infowin-content'>Content goes here</div>");
var infoWindow = new google.maps.InfoWindow();
infowindow.setContent($infoWindowContent[0]);
.gm-style-iw{
height: 100% !important;
overflow: hidden !important;
}
он работает для меня
EDITED (выдающийся): Поверьте мне, из ста других ответов на этот вопрос, это единственный правильный, который также объясняет, почему это происходит
Хорошо, поэтому я знаю, что эта ветка устарела и имеет тысячу ответов, но ни один из них не является правильным, и я чувствую необходимость опубликовать правильный ответ.
Во-первых, вам не нужно указывать width's или height's на что угодно, чтобы вы могли показывать свою информацию без полос прокрутки, хотя иногда вы можете случайно заставить ее работать, делая это (но это в конечном итоге не удастся).
Во-вторых, API Карт Google infoWindow's не имеет имеет прокручивающую ошибку, очень сложно найти правильную информацию о том, как они работают. Ну вот, вот:
Когда вы укажете API Карт Google для открытия в инфо-окне следующим образом:
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 (поскольку временный "измерительный div" добавляется к телу), но когда 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 всегда будут одинаковыми.
EDIT RE: Семейство шрифтов
Google, похоже, активно работает над проблемой загрузки шрифтов (описанная ниже), и функциональность изменилась совсем недавно, поэтому вы можете увидеть или не увидеть загрузку шрифта Roboto, когда ваш infoWindow открывается в первый раз, в зависимости от версии API, который вы используете. Существует открытый отчет об ошибке (хотя в changelog этот отчет об ошибке уже был отмечен как исправленный), который иллюстрирует, что Google по-прежнему испытывает трудности с этой проблемой.
ОДНА БОЛЬШЕ ВЕЩЬ: ПОСМОТРЕТЬ СВОИ СЕМЬИ FONT!!!
В последнем воплощении 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 завершил загрузку), контент отображался шрифтом, который был другого размера - и voila - полосы прокрутки появляются при первом открытии infoWindow. Откройте тот же самый infoWindow второй раз - в этот момент загрузился Roboto и будет использоваться, когда API будет проводить измерения содержимого infoWindow, и вы не увидите никаких полос прокрутки.
Я попробовал каждый из перечисленных ответов. Никто не работал у меня.
Это окончательно зафиксировало это ПОСТОЯННО.
Унаследованный код имел обертку DIV вокруг всех записей <h#> и <p>. Я просто заставлял некоторый "стиль" в том же DIV, принимая во внимание желаемую максимальную ширину, на всякий случай менял изменение высоты строки (кто-то еще исправил) и мой собственный white-space: nowrap, который затем сделал автоматическое переполнение сделать правильный корректировки. Нет полосы прокрутки, без усечения и никаких проблем!
html = '<div class="map-overlay" style="max-width: 400px;
line-height: normal;
white-space: nowrap;
overflow: auto;
">';
Я знаю, что это старый поток, но я столкнулся с одной и той же проблемой. У меня были элементы <h2> и <p> в InfoWindow, и оба они имели нижние поля. Я удалил поля, а InfoWindow - правильно. Ни одна из других предложенных исправлений не работала. Я подозреваю, что вычисление размера InfoWindow не учитывает поля.
Собираемся добавить мой ответ в список, так как NONE из этих исправил мою проблему. Я закончил обертку моего содержимого в 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;
}
Я пробовал все эти решения, и никто не работал. После некоторых проб и ошибок я понял это.
<style type="text/css">
#map_canvas {
line-height:normal;
}
</style>
Установите высоту линии: нормальный для div canvas карты.
Похоже, проблема связана с веб-сайтом Roboto.
Информационное наполнение визуализируется с помощью встроенных свойств ширины и высоты на основе предоставленного содержимого. Однако он не рассчитывается с помощью webfont, уже обработанного/загруженного. После того, как шрифт будет отображаться ПОСЛЕ того, как вся карта будет напечатана на экране, это приведет к появлению полос прокрутки из-за свойств "переполнения: авто" внутри окна DIVs.
Решение, которое я нашел для работы, - это обернуть содержимое в DIV, а затем применить CSS для переопределения webfont:
.gmap_infowin {
font-family: sans-serif !important;
font-weight: normal !important;
}
<div class="gmap_infowin">Your info window content here.</div>
Достаточно смешно, в то время как следующий код исправит полосу прокрутки WIDTH:
.gm-style-iw
{
overflow: hidden !important;
line-height: 1.35;
}
Потребовалось это, чтобы скорректировать полосу прокрутки HEIGHT:
.gm-style-iw div
{
overflow: hidden !important;
}
EDIT: Добавление пробела: nowrap; в любой стиль может исправить проблему с интервалом, которая, как представляется, задерживается при удалении полос прокрутки. Великий момент Натана.
Это работает для меня.
Поместите a 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.
Это полностью разрешило мою проблему:
.gm-style-iw {
overflow: visible !important;
height: auto !important;
width: auto !important;
}
У меня была такая же проблема с IE и многие из исправлений, подробно описанных в этих ответах, но не удалось удалить вертикальные полосы прокрутки в IE надежно.
Для меня лучше всего было переключиться на фиксированные размеры шрифта внутри infowindow - 'px'... Я использовал ems. Исправляя размер шрифта, мне больше не нужно явно объявлять ширину или высоту infowindow, и полосы прокрутки исчезли навсегда.
Также важна высота контейнера карты. Если на маленькую infoWindow всегда будет высота 80px. В противном случае исправление maxWidth и #innerDiv работает как шарм.
Если ничего другого, попробуйте добавить содержимое после того, как окно было открыто. Это должно заставить его изменить размер.
infoWindow = new google.maps.InfoWindow()
infoWindow.open(map, marker)
infoWindow.setContent(content)
Используйте событие 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), но иногда это не сработало, если для загрузки содержимого (т.е. изображений) потребовалось слишком много времени.
Надеюсь, это сработает для вас.
У меня была такая же проблема, особенно заметно, когда мой элемент <h2> был перенесен во вторую строку.
Я применил класс к <div> в infoWindow и изменил шрифты на общий системный шрифт (в моем случае, Helvetica) по сравнению с шрифтом веб-шрифта @font-face, который он использовал. Проблема решена.
//infowindow.setContent(response);
var infowindowopts = {
maxWidth: 274,
content: response
};
infowindow.setOptions(infowindowopts);
Мой ответ заключается в том, чтобы добавить слушателя (используя addListenerOnce), чтобы проверить, добавлено ли инфо-окно в 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);
});
Добавьте min-height к элементу класса infoWindow.
Это решит проблему, если ваши информационные окна имеют одинаковый размер.
Если нет, добавьте эту строку jQuery в вашу функцию click для infoWindow:
//remove overflow scrollbars
$('#myDiv').parent().css('overflow','');
Я не мог заставить его работать каким-либо образом в форме или форме, я включил 3 divs в коробку. Я завернул их в внешний div, с настройками ширины и высоты, и ничего не получилось.
В конце концов я исправил его, установив div как абсолютный верхний левый, а затем перед div, я установил два изображения: один 300px широкий и 1px высокий, один 120px высокий и 1px широкий, прозрачный gif.
Он правильно масштабируется!
Его уродливый, но он работает.
Вы также можете сделать одно изображение и установить zindex, которого я ожидаю, или даже одно изображение, если ваше окно не имеет взаимодействия, но оно содержало форму, поэтому это не было вариантом...
Я думаю, что это поведение связано с некоторым стилем CSS в внешнем контейнере, у меня была та же проблема, но я решил его с помощью внутреннего div, добавив к нему некоторое дополнение, я знаю, что это странно, но он решил проблему
<div id="fix_height">
<h2>Title</h2>
<p>Something</p>
</div>
И в моем style.css
div#fix_height{
padding: 5px;
}
У меня был встроенный элемент (тег) непосредственно внутри div с style="overflow:auto"[..., завернутый в тег p и исправленный.
Похоже, что любой встроенный элемент, который не вложен в элемент блока непосредственно внутри infowindow, вызовет это.
Добавление следующего в мой CSS помогло:
white-space: nowrap;
Просто подведем итоги всех решений, которые работали для меня во всех браузерах:
Задайте максимальную ширину для infowindow:
this.infowindow = new google.maps.InfoWindow({
maxWidth: 200
});
Оберните содержимое информационного окна
<div style="overflow:hidden;line-height:1.35;min-width:200px;">*CONTENT*</div>
(измените минимальную ширину для значения, которое вы установили на infowindow maxWidth)
Я тестировал его, и он работал на каждом браузере, и у меня было более 400 маркеров...
Я знаю, что многие другие люди нашли решения, которые работали для их конкретного случая, но поскольку ни один из них не работал для моего конкретного случая, я думал, что это может быть полезно кому-то другому.
Некоторые сведения:
Я использую API-интерфейс google maps v3 в проекте, где встроенный CSS - это то, что мы действительно хотим, чего бы избежать. Мои infowindows работали на все, кроме IE11, где ширина не была рассчитана правильно. Это привело к переполнению div, что вызвало прокрутки.
Мне пришлось сделать три вещи:
Удалите весь экран: правила стиля inline-block из чего-либо внутри содержимого infowindow (я заменил на display: block). У меня возникла идея попробовать это из потока (которого я больше не могу найти) где у кого-то была такая же проблема с IE6.
Передайте содержимое как DOM node вместо строки. Я использую jQuery, поэтому я мог бы сделать это, заменив: infowindow.setContent(infoWindowDiv.html()); на infowindow.setContent($(infoWindowDiv.html())[0]);
Это оказалось для меня самым легким, но есть много других способов получить тот же результат.
Используйте "setMaxWidth" hack - установите параметр MaxWidth в конструкторе - установка опции позже не будет работать. Если вам не нужна максимальная ширина, просто установите ее на очень большое число.
Я не знаю, почему это сработало, и я не уверен, будет ли их подмножество работать. Я знаю, что никто из них не работает для всех моих вариантов использования отдельно, и что 2 + 3 не работает. У меня не было времени на тестирование 1 + 2 или 1 + 3.
Мне было неприемлемо жестко кодировать ширину и высоту информационного окна или установить 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);
(Я отправил одно и то же решение по аналогичному вопросу Как мне получить карту InfoWindow Google для изменения размера, чтобы она соответствовала содержимому, которое находится внутри него?)
После потери времени и чтения некоторое время я просто хотел что-то простое, этот css работал для моих требований.
.gm-style-iw > div { overflow: hidden !important; }
Также не является мгновенным решением, но в главных ролях/комментариях по проблеме может потребоваться их исправление, поскольку они считают, что исправлено: http://code.google.com/p/gmaps-api-issues/issues/detail?id=5713
Хорошо, это тот, который помогло:
.gm-style-iw>div {
overflow: visible !important;
}
Только установка overflow: visible на .gm-style-iw действительно сделала проблему хуже! Я заметил в инспекторе инструментов разработчика Chrome, что есть два div внутри элемента .gm-style-iw, оба из которых имеют overflow: auto, установленные по умолчанию.
Я показываю довольно много HTML-форматированного текста в своих InfoWindows, возможно, поэтому другие решения для меня не работали.