google-maps-api-3 - 获取 Google Maps v3 以调整 InfoWindow 的高度

Question

当我单击一个标记并出现 InfoWindow 时，如果内容的长度比 InfoWindow 默认高度 (90px) 长，则高度不会调整。

我使用纯文本，没有图像。

我试过maxWidth。

我检查了继承的 CSS。

我已将我的内容包装在一个 div 中
并将我的 CSS 应用于其中，包括
一个高度。

我什至试过强制
使用 jQuery 调整大小的 InfoWindow
使用 domready 事件
信息窗口。

我只剩下几根头发了。这是我的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 来自 XML 文件的 AJAX 查询。数据不是问题，因为它总是正确地通过。 codeAddress() 在数据被检索和格式化后被调用。

文件中的 HTML:

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

我的 InfoWindow 内容的 CSS(没有其他 CSS 适用于 map ):

#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 (我正在扩展)