Загрузите Google Maps v3, чтобы изменить высоту окна InfoWindow.

Question

Когда я щелкаю маркер и появляется окно InfoWindow, высота не изменяется, если длина содержимого превышает высоту по умолчанию окна InfoWindow (90 пикселей).

• Я использую только текст, без изображений.
• Я пробовал maxWidth.
• Я проверил наличие унаследованного CSS.
• Я завернул содержимое в div и применил мой CSS к этому, в том числе высота.
• Я даже пытался заставить InfoWindow для изменения размера с помощью jQuery используя событие domready на InfoWindow.

У меня осталось всего несколько волосков. Вот мой JS:

var geocoder;
var map;
var marker;

function initialize() {
  geocoder   = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(41.8801,-87.6272); 
  var myOptions = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function codeAddress(infotext,address) {
  geocoder.geocode({ 'address': address }, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var image  = '/path-to/mapMarker.png';
      var infowindow = new google.maps.InfoWindow({ content: infotext, maxWidth: 200 });
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location,
        icon: image
      });
      google.maps.event.addListener(marker, 'click', function () { 
        infowindow.open(map, marker); 
      });
    }
  });

}

function checkZipcode(reqZip) {

  if ( /[0-9]{5}/.test(reqZip) ) {

    $.ajax({
      url: 'data.aspx?zip=' + reqZip,
      dataType: 'json',
      success: function(results) {

        $.each(results.products.product, function() {

          var display = "<span id='bubble-marker'><strong>"+this.name+"</strong><br>"+
                        this.address+"<br>"+
                        this.city+", "+this.state+" "+this.zip+"<br>"+
                        this.phone+"</span>";

          var address = this.address+","+
                        this.city+","+
                        this.state+","+
                        this.zip;

          codeAddress(display,address);

        });

      },
      error: function() { $('#information-bar').text('fail'); }
    });

  } else { $('#information-bar').text('Zip codes are five digit numbers.'); }

}

$('#check-zip').click(function() { $('#information-bar').text(''); checkZipcode($('#requested-zipcode').val()); });

initialize();

InfoText и Address поступают из AJAX-запроса XML-файла. Данные не проблема, так как они всегда поступают правильно. codeAddress () вызывается после того, как данные получены и отформатированы.

HTML в файле:

<div id="google_map"> <div id="map_canvas" style="width:279px; height:178px"></div> </div>

CSS для моего содержимого InfoWindow (никакой другой CSS не применяется к карте):

#bubble-marker{ font-size:11px; line-height:15px; }

Answer 1

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

// 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: «экземпляр» ссылается на текущий пользовательский подкласс google.maps.OverlayView (который я расширяю)

Answer 2

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

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

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

Answer 3

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

Тем не менее, у меня возникла та же проблема на сайте, который я создавал.Я решил эту проблему, создав клонированный div, содержащий содержимое InfoWindow, измерив ширину и высоту этого 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); 
            });
        }
    });
}

Answer 4

Это не совсем ответ (решение daveoncode создать узел DOM и использовать его как правильный контент), но если вам нужно динамически изменить контент после его установки (например, с помощью jQuery), то вы можете заставить gmail изменить размерОкно информации с:

infoWindowLinea.setContent(infoWindowLinea.getContent());

Answer 5

Просто поместите содержимое InfoBox в DIV с отступом внизу: 30 пикселей;

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;
}