Google Maps V3: Infowindows не изменение размера, чтобы соответствовать информации

Question

Problem

У меня есть карта API V3, с окном контента для каждых маркеров. Содержимое infowindow простирается на несколько строк, но infowindow не изменяет размер, чтобы соответствовать всем этим, в результате чего появляется прокрутка, похожая на iframe.

Я рассмотрел метод setContent() в API, который, согласно некоторым сообщениям в списке рассылки API V3, должен исправить проблему. Однако похоже, что я помещался в неправильное место, что заставило карту не загружаться.

Содержимое Infowindow заполняется из поля в location_array.

Карта Код

Вот код, я использую, минус метод setContent().

<script src="/_global/assets/scripts/jquery-1.2.6.min.js" type="text/javascript"></script> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script language="javascript"> 
$(document).ready(function() { 
    //Google Maps 
    var myOptions = { 
     zoom: 5, 
     center: new google.maps.LatLng(-26.66, 122.25), 
     mapTypeControl: true, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }, 
     navigationControl: true, 
     navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL } 
    } 

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    // Create an array to hold a series of generic objects 
    // Each one will represent an individual marker, and contain all the 
    // information we need for that marker. This way, we can reuse the data 
    // on the client-side in other scripts as well. 

    var locations_array = [ 
    {latitude: -35.015672, longitude: 117.879639, title: "Albany", infoWindowContent: "<strong>Albany</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcAlbany\">Get office details</a>"}, 
    {latitude: -33.351479, longitude: 115.666658, title: "Bunbury", infoWindowContent: "<strong>Bunbury</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcBunbury\">Get office details</a>"}, 
    {latitude: -24.850919, longitude: 113.731984, title: "Carnarvon", infoWindowContent: "<strong>Carnarvon</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcCarnarvon\">Get office details</a>"}, 
    {latitude: -33.361363, longitude: 116.161534, title: "Collie", infoWindowContent: "<strong>Collie</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcCollie\">Get office details</a>"}, 
    {latitude: -33.847418, longitude: 121.884107, title: "Esperance", infoWindowContent: "<strong>Esperance</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcEsperance\">Get office details</a>"}, 
    {latitude: -31.795396, longitude: 115.88941, title: "Gnangara", infoWindowContent: "<strong>Gnangara</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcGnangara\">Get office details</a>"}, 
    {latitude: -33.082093, longitude: 115.913902, title: "Harvey", infoWindowContent: "<strong>Harvey</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcHarvey\">Get office details</a>"}, 
    {latitude: -33.082093, longitude: 115.913902, title: "Harvey Mill", infoWindowContent: "<strong>Harvey Mill</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcHarveyMill\">Get office details</a>"}, 
    {latitude: -30.749071, longitude: 121.472324, title: "Kalgoorlie", infoWindowContent: "<strong>Kalgoorlie</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcKalgoorlie\">Get office details</a>"}, 
    {latitude: -33.691176, longitude: 117.557189, title: "Katanning", infoWindowContent: "<strong>Katanning</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcKatanning\">Get office details</a>"}, 
    {latitude: -32.531789, longitude: 115.721341, title: "Mandurah", infoWindowContent: "<strong>Mandurah</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcMandurah\">Get office details</a>"}, 
    {latitude: -34.250365, longitude: 116.147165, title: "Manjimup", infoWindowContent: "<strong>Manjimup</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcManjimup\">Get office details</a>"}, 
    {latitude: -33.982459, longitude: 115.765361, title: "Nannup", infoWindowContent: "<strong>Nannup</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcNannup\">Get office details</a>"}, 
    {latitude: -31.953472, longitude: 115.914248, title: "Rivervale", infoWindowContent: "<strong>Rivervale</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcRivervale\">Get office details</a>"}, 
    {latitude: -31.948893, longitude: 115.795029, title: "Shenton Park", infoWindowContent: "<strong>Shenton Park</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcShentonPark\">Get office details</a>"}, 
    {latitude: -34.214112, longitude: 116.074472, title: "West Manjimup", infoWindowContent: "<strong>West Manjimup</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcManjimupWest\">Get office details</a>"}, 
    ]; 

    // Now let's create some markers 

    for (var x = 0; x < locations_array.length; x++) { 
     // Grab an individual park object out of our array 
     var _park = locations_array[x]; 
     var myLatlng = new google.maps.LatLng(locations_array[x].latitude,locations_array[x].longitude); 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: myLatlng, 
      title: locations_array[x].title, 
      icon: 'http://google-maps-icons.googlecode.com/files/park.png', 
      clickable: true, 
      infocontent: locations_array[x].infoWindowContent 
     }); 
     google.maps.event.addListener(marker, 'click', function() { 
      var infowindow = new google.maps.InfoWindow({ 
       content: this.infocontent 
      }); 
      infowindow.open(map,this); 
     }); 
     google.maps.event.addListener(marker, 'dblclick', function() { 
     map.setZoom(16); 
     }); 
    } 
}); 
</script> 

Answer 1

Попробуйте поместить HTML-строки infoWindowContent в DIV с классом, который имеет ширину набора затем изменить:

content: this.infocontent 

быть

content: $(this.infocontent)[0]