google maps - personalizar - Google Map InfoWindow muestra barras de desplazamiento en Google Chrome

multiple infowindows google maps

Question

Por algún motivo, InfoWindow muestra barras de desplazamiento junto con el contenido, intenté tener ancho y alto personalizados para InfoWindow, pero no aparece. Probé la solución desde aquí Google Map Infowindow no se muestra correctamente

Consulte el siguiente enlace http://server.ashoresystems.com/~contacth/index.php?option=com_business&view=categoryresult&catid=2

• Haga clic en 1 (tiene barras de desplazamiento)
• Haga clic en 3 (incluso perturbado)

Gracias por cualquier ayuda.

Answer 1

Encontré una solución here .

Hice este JSfiddle , mostrando el error y una solución.

Si no desea visitar enlaces externos, aquí está la descripción de la solución:

Agregue un div de envoltura al contenido de su ventana de información:

var infoWindow = new google.maps.InfoWindow({
    content: ''<div class="scrollFix">''+infoWindowContent+''</div>'',
    [...]
}).open(map);

Y usa las definiciones de CSS para evitar las barras de desplazamiento:

.scrollFix {
    line-height: 1.35;
    overflow: hidden;
    white-space: nowrap;
}

Answer 2

Google maps agrega style="overflow: auto;" al elemento raíz de contenido y elimina todos los demás atributos, incluido tu style=... o class="scrollFix" . Puede anular el overflow: auto así:

.gm-style-iw div * { overflow: hidden !important; line-height: 1.35em; }

Answer 3

Para ocultar las barras de desplazamiento, proporcione a su contenido un orden de pila de alto índice z, por ejemplo:

var infowindow = new google.maps.InfoWindow({
    content: ''<div style="z-index:99999">Message appears here</div>'',
});

O agregue el siguiente estilo:

.gm-style-iw {
    overflow:hidden!important;
    height:55px!important; //for 3 lines of text in the InfoWindow
}

Answer 4

Usted puede leer sobre ello aquí:

https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows

¡Saludos!