Google maps infobox - maxWidth

Question

Me enfrenta a un comportamiento extraño de google maps infobox. Ajusté maxWidth en 0 para permitir que el tamaño del cuadro de información se ajuste al contenido, pero siempre obtengo un cuadro de información de 236px.

var infobox = new InfoBox({ 
    maxWidth:0 
    ,pixelOffset: new google.maps.Size(5, 10) 
    ,isHidden:false 
    ,closeBoxURL:"" 
    ,pane: "floatPane" 
    ,enableEventPropagation: false 
    ,Zindex: null 
}); 

Si ajusto el ancho del cuadro de información en el archivo css como se muestra a continuación, obtengo el mismo tamaño en cada cuadro de información.

.infobox {width: 500px;} 

Lo que estoy haciendo mal? ¿Alguna idea de cómo resolver esto?

Answer 1

También puede utilizar el objeto boxStyle en el InfoBoxOptions

boxStyle: { 
     whiteSpace: "nowrap" 
} 

Answer 2

me enfrentaba a un problema similar, por lo que recuperada la anchura y la altura óptima dinámicamente y luego configurar mis dimensiones cuadro de información en consecuencia. Aquí hay una función jQuery y la aplicación de la función que debería resolver este problema. Siento que el API es realmente decepcionante en esto.

getInfoBoxDimensions: function(content) { 
    var sensor = $("<div>").html(content); 
    $(sensor).appendTo("body").css({"position" : "absolute", "left" : "-900px"}); 
    var width = $(sensor).width(); 
    var height = $(sensor).height(); 
    $(sensor).remove(); 
    return new Array(width, height); 
}, 

Ahora se puede agarrar la altura y la anchura del contenido html con la siguiente:

var infoBoxDimensions = getInfoBoxDimensions(info_box_html); 

y establecer su caja de información utilizando la siguiente:

var ib = new InfoBox({ 
    content : info_box_html, 
    boxStyle : { 
      width : infoBoxDimensions[0] + "px", 
      height : infoBoxDimensions[1] + "px" 
    }, 
    .... 
    .... 
}); 

Su info_box_html debe tener su estilo establecer en "bloque en línea". De forma predeterminada, un elemento de bloque tendrá un ancho del 100%, solo queremos el ancho exacto de nuestro contenido, y inline-block lo hará por nosotros.

la esperanza de que le ayude,

Answer 3

no saben cómo "correcta" esta solución, pero aquí va:

acaba de establecer la anchura y la altura de la caja de información envoltorio de Google en Auto y añade importantes para prevenir Google JS de cambiar su tamaño:

.gm-style-iw { 
    width: auto !important; 
    height: auto !important; 
    div { 
     width: auto !important; 
     height: auto !important; 
    } 
}