ВИДАВАНО (виділитись): Повірте мені, зі ста інших відповідей на це питання це єдино правильний, який також пояснює ЧОМУ це відбувається
Гаразд, отже, я знаю, що ця тема стара і має тисячу відповідей, але жодна з них не є правильною, і я відчуваю потребу опублікувати правильну відповідь.
По-перше, вам ніколи не потрібно вказувати width'sабо height'sщось робити, щоб ваше infoWindow відображалося без смуг прокрутки, хоча іноді ви можете випадково запустити його, роблячи це (але це врешті-решт не вдасться).
По-друге, в API Карт Google 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 Maps тимчасово розміщує a 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.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або всередині a #map-canvas, правила CSS, що застосовуються до нього, завжди будуть однаковими.
EDIT 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вмісту, і ви не побачите смуг прокрутки.