Получить Google Maps v3 для изменения высоты InfoWindow

Ответ 1

Наконец я нашел рабочее решение проблемы. Не так гибко, как я хотел, но это довольно хорошо. В основном ключевой момент: не используйте строку в качестве содержимого окна, а вместо DOM node. Это мой код:

// this dom node will act as wrapper for our content
var wrapper = document.createElement("div");

// inject markup into the wrapper
wrapper.innerHTML = myMethodToGetMarkup();

// style containing overflow declarations
wrapper.className = "map-popup";

// fixed height only :P
wrapper.style.height = "60px";

// initialize the window using wrapper node     
var popup = new google.maps.InfoWindow({content: wrapper});

// open the window
popup.open(map, instance);

следующее объявление CSS:

div.map-popup {
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
}

ps: "instance" относится к текущему пользовательскому подклассу google.maps.OverlayView (который я расширяю)

Ответ 2

Просто оберните содержимое с помощью div и укажите его высоту: <div style="height:60px">...</div>, например.

 myMarker.setContent('<div style="height:60px">' + txt + '</div>');

- В моем случае это было достаточно.

Ответ 3

Ваш холст карты слишком мал. Увеличьте ширину/высоту вашего элемента <div id="map_canvas">, и вы должны увидеть больше InfoWindows автоматически.

Тем не менее, у меня была такая же проблема на сайте, который я строил. Я решил это, создав клонированный div, содержащий контент InfoWindow, измеряя ширину и высоту div, а затем установив для этого div div в InfoWindow измеренную ширину и высоту. Здесь мой код портирован в середину вашей функции codeAddress (также обратите внимание, что я удалил maxWidth: 200 из вашего объявления InfoWindow):

function codeAddress(infotext,address) {
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);

            // Create temporary div off to the side, containing infotext:
            var $cloneInfotext = $('<div>' + infotext + '</div>')
                .css({marginLeft: '-9999px', position: 'absolute'})
                .appendTo($('body'));

            // Wrap infotext with a div that has an explicit width and height, 
            // found by measuring the temporary div:
            infotext = '<div style="width: ' + $cloneInfotext.width() + 'px; ' +
                'height: ' + $cloneInfotext.height() + 'px">' + infotext + 
                '</div>';

            // Delete the temporary div:
            $cloneInfotext.remove();

            // Note no maxWidth defined here:
            var infowindow = new google.maps.InfoWindow({ content: infotext }); 
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
            google.maps.event.addListener(marker, 'click', function () { 
                infowindow.open(map, marker); 
            });
        }
    });
}

Ответ 4

Просто оберните содержимое InfoBox DIV с помощью padding-bottom: 30px;

JS:

map_info_window = new google.maps.InfoWindow();      
var $content = $('<div class="infobox">').html(content);
map_info_window.setContent($content.get(0));
map_info_window.open(map, marker);

CSS

.infobox{
    padding-bottom: 30px;
}

Ответ 5

На самом деле это не ответ (решение daveoncode для создания DOM node и использование его в качестве правильного содержимого), но если вам нужно динамически изменять содержимое после его установки (например, с помощью jQuery), вы можете заставить gmail измените размер infoWindow на:

infoWindowLinea.setContent(infoWindowLinea.getContent());