Obtenga Google Maps v3 para redimensionar la altura de InfoWindow

Question

Cuando hago clic en un marcador y aparece InfoWindow, la altura no se ajusta si la longitud del contenido es más larga que la altura predeterminada de InfoWindow (90px).

• Estoy utilizando texto solamente, sin imágenes.
• He intentado maxWidth.
• He comprobado si he heredado CSS.
• He envuelto mi contenido en un div y he aplicado mi CSS a eso, incluyendo una altura.
• Incluso he intentado forzar el InfoWindow para cambiar el tamaño con jQuery usando el evento domready en el InfoWindow.

Solo me quedan algunos pelos. Aquí está mi 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(); 

InfoTexto y Dirección proceden de una consulta AJAX de un archivo XML. Los datos no son el problema, ya que siempre se cumplen correctamente. Se llama a codeAddress() después de que los datos han sido recuperados y formateados.

HTML en el archivo:

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

CSS para el contenido de mi ventana de información (no hay otra CSS se aplica al mapa):

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

Answer 1

Su vista del mapa es demasiado pequeño. Aumente el ancho/alto de su elemento <div id="map_canvas"> y debería ver InfoWindows más grandes automáticamente.

Dicho esto, tuve el mismo problema en un sitio que estaba construyendo. Lo resolví creando un div clonado que contenía el contenido de InfoWindow, midiendo el ancho y el alto de ese div y luego configurando el div de contenido de InfoWindow para que tuviera ese ancho y alto medidos. Aquí está mi código portado en el centro de su función codeAddress (también en cuenta que me quita el maxWidth: 200 de su declaración 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 2

Finalmente encontré una solución de trabajo para el problema. No es tan flexible como deseé, pero es bastante bueno. Fundamentalmente, el punto clave es: no use una cadena como contenido de ventana, sino un nodo DOM. Este es mi código:

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

la siguiente es la declaración CSS:

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

ps: "instancia" se refiere a la subclase personalizada actual de google.maps.OverlayView (que extiendo)

Answer 3

Envuelva su contenido de InfoBox con DIV con relleno: 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

Simplemente envuelva su contenido con un div y especifique su altura: <div style="height:60px">...</div>, por ejemplo,

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

- En mi caso, fue suficiente.

Answer 5

No es realmente una respuesta (la solución daveoncode para crear un nodo DOM y usarlo como contenido es correcto), pero si necesita cambiar dinámicamente el contenido una vez configurado (por ejemplo, con jQuery) puede forzar a gmail a cambiar el tamaño la ventana de información con:

infoWindowLinea.setContent(infoWindowLinea.getContent());