Как удалить полосы прокрутки из Google map bubble в карте Google Javascript V3

Я использовал API карты Google javascript V3 для отображения карты. Но у меня проблема с пузырьками карты. Когда информация в пузырьке больше определенной высоты, она вставляет полосы прокрутки в пузырь.

Как я могу удалить эти полосы прокрутки и назначить динамическую ширину и высоту для пузыря в соответствии с их содержанием?

Или как я могу создать собственный собственный пузырь, чтобы сделать его динамическим для ширины и высоты в соответствии с содержимым?

Спасибо заранее.

Ответ 1

Схожая проблема - полосы прокрутки появляются во всплывающих окнах с текстовым контентом, иногда они исчезают после закрытия и всплывающие всплывающие окна снова, они также появляются, если я изменяю уровень масштабирования страницы.

Этот пост был полезен. Я добавил несколько строк CSS и решил все мои дополнительные случаи прокрутки:

.gm-style-iw {
   overflow: hidden !important; 
   line-height: 1.35;
   white-space: nowrap;
}

Ответ 2

Если у вас есть изображение в ваших инфо-окнах, как я, попробуйте немного встроенного стиля, в котором вы устанавливаете контент для инфо-окон. Я обнаружил, что добавление display:block в тег img исправило проблему для меня.

Протестировано на FF, IE9, Opera, Safari, Chrome.

Пример:

    var html = "<img style=\"display:block;\" src=\""+image+"\"/>"

Ответ 3

http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows

посмотреть maxwidth

Ответ 4

Я обнаружил, что firefox пересчитывает высоту элемента. например:

firs элемент времени добавляется в dom, он вычисляет что-то вроде высоты по умолчанию, пусть оно составляет 100 пикселей.
тогда gmaps извлекает эту высоту и помещает ее в оболочку infowindow, height = 100px.
то fashches firefox применяет стили для этого элемента (например, размер шрифта) и помещает свойство height на основе этих вычисленных стилей, например height = 130px, но infowindow wrapper height = 100px уже задан gmap script.

найденное решение немного уродливое, но оно работает, мы должны сделать gmaps script для пересчета высоты оболочки infowindow после того, как firefox пересчитал высоту элементов.

infowindow.setContent(data);
infowindow.open(map, marker);
infowindow.close();
setTimeout(function (){
    infowindow.open(map, marker);
}, 1);

Ответ 5

Благодаря инспектору элементов chromes я вижу, что содержимое infowindow, которое вы предоставляете, всегда завернуто в < div style = "overflow: auto" > .. </div> . Установка maxWidth, похоже, не останавливает горизонтальную полосу прокрутки, если у вас есть высота прокрутки. Я решил, что мне нужно взломать родительский элемент и отключить горизонтальную прокрутку, то есть переполнение-x: скрыто.

Поместите идентификатор идентификатора в предоставленный html и найдите этот элемент (используя jQuery здесь) после загрузки infoWindow (нужно использовать addListener). Перейдите от элемента к родительскому и установите его свойство overflow-x в скрытое, а затем удалите горизонтальную полосу прокрутки.

Это, конечно, взломать - и может перестать работать, если изменения кода HTML в Google googles меняются - надеюсь, к тому времени также будет лучшее решение.

//assume you have a marker already called marker

google.maps.event.addListener(marker, 'click', function(){  

    var _info = new google.maps.InfoWindow({content: '<div id="infoWindow">content that is vertically large...</div>' });

    google.maps.event.addListener(_info, 'domready', function(){
        $(document).find('#infoWindow').parent().css('overflow-x', 'hidden' );

    });

    _info.open( map, marker ); 
} );

Ответ 6

У меня была такая же проблема, но мне удалось ее решить, просто изменив размер шрифта и высоту строки в моей обертке.

Ответ 7

Думаю, я нашел решение этого. В моем случае проблема с настройкой размера шрифта вызывала проблему. Я думаю, что API полагается на размер шрифта пикселя, чтобы установить начальную ширину/высоту (потому что JavaScript слишком поздно срабатывает, чтобы рассчитать относительную ширину? Не положительно.)

В любом случае вам нужно указать размеры шрифта в вашем infowindow в пикселях (не относительная единица). Например:

.infowindow p {
  font-size: 15px;
}

Как только я установил единицы в пиксели, мне также пришлось указать (чтобы избавиться от установки ширины по умолчанию):

.gm-style-iw {
  width: auto !important;   
}

Google не замечает, что форматирование очень важно в документах API, поэтому процесс обработки проб и ошибок был выполнен таким образом. Я все еще не чувствую, что это решение на 100% надежнее.