Google maps api 3 获取Google Maps v3以调整信息窗口的高度

当我单击一个标记并显示InfoWindow时，如果内容的长度大于InfoWindow的默认高度（90px），则高度不会调整

• 我只使用文本，没有图像
• 我试过maxWidth
• 我已经检查了继承的CSS
• 我已将我的内容包装在一个div中 并将我的CSS应用于此，包括 高度
• 我甚至试着强迫他们离开 使用jQuery调整信息窗口大小 在上使用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();

---

你的地图画布太小了。增加

元素的宽度/高度，您会自动看到更大的信息窗口

也就是说，我在建设一个网站时遇到了同样的问题。我通过创建一个包含InfoWindow内容的克隆div来解决这个问题，测量该div的宽度和高度，然后将InfoWindow内容div设置为具有该测量的宽度和高度。下面是我移植到codeAddress函数中间的代码（还要注意，我从InfoWindow声明中删除了

maxWidth:200

）：

函数代码地址（信息文本，地址）{
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
map.setCenter（结果[0].geometry.location）；
//在侧面创建临时div off，其中包含infotext：
变量$cloneInfotext=$（“”+infotext+“”）
.css（{marginLeft:'-9999px'，位置：'绝对'}）
.附于（$（“正文”）；
//使用具有明确宽度和高度的div包装infotext，
//通过测量临时div发现：
infotext=''+infotext+
'';
//删除临时div：
$cloneInfotext.remove（）；
//注意：此处未定义maxWidth：
var infowindow=new google.maps.infowindow（{content:infotext}）；
var marker=new google.maps.marker({
地图：地图，
位置：结果[0]。几何体。位置
});
google.maps.event.addListener（标记'click'，函数（）{
信息窗口。打开（地图、标记）；
});
}
});
}

我终于找到了解决这个问题的有效方法。它不像我希望的那样灵活，但它很好。基本上，关键点是：不要使用字符串作为窗口内容，而是使用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声明：

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

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

---

ps:“实例”指的是google.maps.overlyview的当前自定义子类（我正在扩展）

只需用DIV将信息框内容包装起来，底部填充：30px

JS:

---

只需使用div包装内容并指定其高度：

…

，例如

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

myMarker.setContent（“”+txt+“”）；

---

-就我而言，这已经足够了。

这并不是一个真正的答案（daveoncode创建DOM节点并将其用作内容的解决方案是正确的），但如果您需要在设置内容后动态更改内容（例如使用jQuery），那么您可以强制gmail通过以下方式调整信息窗口的大小：

infoWindowLinea.setContent(infoWindowLinea.getContent());

---

你有没有找到解决办法？我也有同样的问题…我也没能把它修好，为了我的头发和理智，我最终只是重新做了我想做的。我很想知道是否有解决方案……这太好了。您可以使用

jQuery（“…”）创建DOM节点。获取（0）

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

.infobox{
    padding-bottom: 30px;
}

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

infoWindowLinea.setContent(infoWindowLinea.getContent());