В Google Map InfoWindow отображаются полосы прокрутки в Google Chrome

По какой-то причине InfoWindow показывает полосы прокрутки вместе с контентом, я попытался настроить пользовательскую ширину и высоту в InfoWindow, но он не отображается. Я попробовал решение отсюда Google Map Infowindow не отображается должным образом

Пожалуйста, обратитесь к следующей ссылке http://server.ashoresystems.com/~contacth/index.php?option=com_business&view=categoryresult&catid=2

  • Нажмите 1 (имеет полосы прокрутки)
  • Нажмите на 3 (даже нарушено)

Спасибо за любую помощь.

Ответы

Ответ 1

Я нашел обходное решение здесь.

Я сделал это JSfiddle, отображая ошибку и обходной путь.

Если вы не хотите посещать внешние ссылки, вот описание обходного пути:

Добавьте обертку div в содержимое вашего информационного окна:

var infoWindow = new google.maps.InfoWindow({
    content: '<div class="scrollFix">'+infoWindowContent+'</div>',
    [...]
}).open(map);

И используйте определения CSS, чтобы избежать полос прокрутки:

.scrollFix {
    line-height: 1.35;
    overflow: hidden;
    white-space: nowrap;
}

Ответ 2

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

var infowindow = new google.maps.InfoWindow({
    content: '<div style="z-index:99999">Message appears here</div>',
});

Или добавьте следующий стиль:

.gm-style-iw {
    overflow:hidden!important;
    height:55px!important; //for 3 lines of text in the InfoWindow
}

Ответ 3

Карты Google добавляют style="overflow: auto;" к корневому элементу контента и удаляют все остальные атрибуты, включая style=... или class="scrollFix". Вы можете переопределить overflow: auto следующим образом:

.gm-style-iw div * { overflow: hidden !important; line-height: 1.35em; }