javascript - personalizar - multiple infowindows google maps

Controlar el ancho de un Google Maps InfoWindow

Question

¿Alguien sabe cómo configurar el ancho de la ventana de información en Google Maps? El infowindow es una burbuja similar a un dibujo animado que aparece cuando haces clic en un punto en Google Maps. Puedo controlar la altura a través de CSS pero no puedo imaginar cómo cambiar el ancho (quiero más delgado que la ventana de entrada predeterminada).

Encontré una referencia a maxWidth en la API pero no puedo averiguar dónde colocar esto. ¿Algunas ideas?

Answer 1

Puede anular el estilo de Google Maps.

/* Just use .gm-style-iw */
.gm-style-iw {
width: 300px;
min-height: 150px;
}

Fuente: https://katz.co/resizing-infowindow/

Answer 2

Puedes agregar div al principio así:

<div style=''width:300px;margin:0 0 20px 20px;height:90px;''>

Answer 3

Para v3 de la API, la propiedad InfoWindowOptions.maxWidth hace lo que está pidiendo. El constructor de InfoWindow toma un argumento opcional de un objeto InfoWindowOptions .

var iw = new google.maps.InfoWindow({ content: some_text, maxWidth: 200 });

La documentation señala que el "valor solo se tiene en cuenta si se establece antes de abrir una llamada. Para cambiar el ancho máximo al cambiar el contenido, cerrar la llamada, establecer opciones y luego abrir".