Google Map.InfoWindow Установите высоту и ширину

Как вы определяете размер и ширину карты google InfoWindow? Я просмотрел на странице api и нашел только метод maxWidth.

Изменить: Я пробовал несколько вещей. Пока что ни одна из этих работ не работает:

    var markerInfoWindow = new google.maps.InfoWindow({
        content: markerHTMLString,
        maxHeight: 400,  //Doesn't work
        maxWidth: 400,   //Doesn't work
        width: 300,      //Doesn't work
        height: 300      //Doesn't work
    });

Также говорят, что markerHTMLString равно этому:

<div class = "MarkerPopUp"><div class = "MarkerContext">Text</div></div>

Я тоже пробовал эти три варианта (ни один из них не работал)

.MarkerPopUp {
    height: 300px;
    width: 300px;
}

.MarkerPopUp {
    height: 300px;
    width: 300px;
}

.MarkerContext {
    height: 300px;
    width: 300px;
}

.MarkerContext {
    height: 300px;
    width: 300px;
}

Это также не сработает:

document.getElementById('MarkerPopUp')parentNode.style.overflow = '';

или

document.getElementById('MarkerPopUp').parentNode.parentNode.style.overflow = '';

Я в значительной степени переживаю каждую нить, которую я могу найти и попробовать все. Просто чтобы ограничить несколько вещей (хотя может быть и другая проблема)

Ответ 1

Возможно, когда html передается в карту api и анализируется, что он не имеет доступа к вашим деляциям таблицы стилей. Попробуйте добавить свою ширину как встроенный стиль в MarkerPopUp.

<div class = "MarkerPopUp" style="width: 300px;"><div class = "MarkerContext">Text</div></div>

Я знаю, я тоже ненавижу встроенные стили, но в этом случае он может решить вашу проблему.

Ответ 2

.gm-style-iw{
    max-height: 10px;
}

Стиль установки для gm-style-iw работает!

Ответ 3

Используйте! important в css

.MarkerPopUp {
    height: 300px !important;
    width: 300px !important;
}

Ответ 4

Вы можете использовать wrapper <div> и добавить стиль, подобный этому <div style='height: 40px; text-align: center'>, и добавить код css .gm-style-iw { max-width: 400px!important;} в ваш файл css;

Ответ 5

Попробуйте выполнить следующий код:

 infowindow = new google.maps.InfoWindow({
        content: "",
        maxWidth: 200 ,
        maxHeight: 400
    });