獲取Google Maps v3以調整InfoWindow的高度

Question

單擊標記並出現InfoWindow時，如果內容的長度比InfoWindow的默認高度（90px）長，則高度不會調整。

• 我正在使用文本，沒有圖像。
• 我試過maxWidth。
• 我檢查過繼承的CSS。
• 我已經將我的內容封裝在div 中，並將我的CSS應用到該高度​​，包括 。
• 我甚至試圖強制 InfoWindow使用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和地址來自XML文件的AJAX查詢。數據不是問題，因爲它始終是正確的。在檢索並格式化數據後調用codeAddress（）。

HTML文件中：

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

CSS我的信息窗口的內容（沒有其他的CSS適用於地圖）：

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

Answer 1

你的地圖畫布太小。增加<div id="map_canvas">元素的寬度/高度，您應該會自動查看更大的InfoWindows。

這就是說，我在我正在構建的網站上遇到同樣的問題。我通過創建一個包含InfoWindow內容的克隆div來解決此問題，測量該div的寬度和高度，然後將InfoWindow content div設置爲具有該測量的寬度和高度。這裏是我的移植到你的codeAddress函數的中間代碼（也注意到，我從你的信息窗口的聲明刪除maxWidth: 200）：

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 2

我終於找到了問題的工作方案。沒有我想要的那麼靈活，但它非常好。基本上關鍵的一點是：不要使用字符串作爲窗口內容，而是使用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 3

只需將您的InfoBox內容用DIFF填充到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; 
} 

Answer 4

只是一個div包裝你的內容，並指定它的高度：<div style="height:60px">...</div>，例如

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

- 就我而言，這已經夠了。

Answer 5

這不是一個真正的答案（daveoncode的解決方案創建一個DOM節點，並使用它作爲內容是正確的），但如果你需要動態改變內容一旦設置（例如與jQuery），那麼你可以強制gmail調整大小infoWindow與：

infoWindowLinea.setContent(infoWindowLinea.getContent());