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