РЕДАКТИРОВАТЬ (выделиться): Поверьте мне, из сотни других ответов на этот вопрос это единственный правильный, который также объясняет, ПОЧЕМУ это происходит.
Хорошо, поэтому я знаю, что эта ветка старая и содержит тысячу ответов, но ни один из них не является правильным, и я чувствую необходимость опубликовать правильный ответ.
Во-первых, вам не нужно указывать 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"></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контент, и вы не увидите полос прокрутки.