Cómo establecer la altura máxima de la ventana de información del marcador del mapa de Google?

Question

Si el contenido de la ventana de información del marcador es demasiado largo, no cabe en la ventana, se desbordará en la parte inferior. ¿Cómo puedo arreglar esto?

Answer 1

Este problema también puede ser el resultado de estilos heredados que se aplica al contenido ventana de información después de que se haya unido a la mapa.

Por ejemplo: El tamaño de la fuente se calculará en función de la fuente predeterminada. Cuando se adjunta la ventana de información, la fuente cambiará en función del CSS heredado y, si es más grande, se desbordará en la parte inferior de la ventana de información.

Si no desea eliminar el estilo heredado (y en su mayoría no lo hace), debe indicar explícitamente el estilo heredado en el contenido de la ventana de información.

puede encontrar una excelente descripción de este problema y es la solución a:

Fixing the 'inherited CSS' problem

Answer 2

Si InfoWindow contiene una imagen, puede estar desbordando porque el tamaño de InfoWindow se establece antes de que se descargue la imagen. Si este es el caso, deberá especificar el tamaño de la imagen o precargarla.

lo contrario, yo sólo tiene que colocar el contenido en un div con una barra de desplazamiento:

div.infowindow { 
    max-height:250px; 
    overflow-y:auto; 
} 

Answer 3

.gm-style-iw{ 
    max-height: 10px; 
} 

Por encima de código hace el trabajo!

Answer 4

La respuesta aceptada es un poco vago ...

Así que aquí hay un par de soluciones directas para cualquiera que quiera cambiar la altura de las ventanas de información, u otras propiedades de estilo.

Método 1: CSS

Aplicar una regla CSS como tal. Cambia toda ventana de información de:

.gm-style-iw { 
    max-height: 200px !important; 
    overflow: auto !important; 
} 

O, si tiene plantillas IW, esto puede funcionar también:

#myInfoWindow-content { 
    max-height: 200px !important; 
    overflow: auto !important; 
} 

desbordamiento necesita tener importancia, de lo contrario, se sustituyó por el de GM reglas propias y largo! el contenido puede ser cortado. La altura máxima funcionará sin importancia, pero probablemente sea mejor para mantenerla de todos modos.

Método 2: CSS en línea

Si utiliza las plantillas para los contenidos IW, a continuación, una opción es al hardcore estilos en línea por ventana de información. No es necesario usar! Importante porque GM parece tomar las reglas completas en este caso.

<div id="myInfoWindow-content" style="max-height: 150px; overflow: auto;"> 
    content 
</div> 

MÉTODO 3: Javascript

Siempre se puede utilizar JS para modificar las cosas de forma dinámica. Puede utilizar este método para orientar y modificar otros elementos IW, como ocultar las flechas IW.

document.getElementById('myInfoWindow-content').style.maxHeight = '20px'; 
document.getElementById('myInfoWindow-content').style.overflow = 'auto';