EDITADO (para destacar): Créame, de las otras cien respuestas a esta pregunta, esta es la única correcta que también explica POR QUÉ está sucediendo
Bien, sé que este hilo es antiguo y tiene mil respuestas, pero ninguna de ellas es correcta y siento la necesidad de publicar la respuesta correcta.
En primer lugar, no siempre es necesario especificar width'so height'sen cualquier cosa con el fin de obtener su infoWindow a la pantalla sin barras de desplazamiento, aunque a veces sin darse cuenta puede conseguir que funcione al hacer esto (pero se fallarán en el futuro).
En segundo lugar, la API de Google Maps infoWindow's no tiene un error de desplazamiento, es muy difícil encontrar la información correcta sobre cómo funcionan. Bueno, aquí está:
Cuando le dice a la API de Google Maps que se abra en infoWindow de esta manera:
var infoWindow = new google.maps.InfoWindow({...});
....
infoWindow.setContent('<h1>Hello!</h1><p>And welcome to my infoWindow!</p>');
infoWindow.open(map);
Para todos los efectos, Google Maps coloca temporalmente un dival final de su página (en realidad crea un detached DOM tree, pero es conceptualmente más fácil de entender si digo que imagina que un divser coloca al final de su página ) con el contenido HTML que usted especificado. Luego mide ese div (lo que significa que, en este ejemplo, las reglas CSS de mi documento se aplican h1y las petiquetas se le aplicarán) para obtener su widthy height. Luego, Google lo toma div, le asigna las medidas que obtuvo cuando se agregó a su página y lo coloca en el mapa en la ubicación que especificó.
Aquí es donde ocurre el problema para muchas personas: pueden tener HTML con este aspecto:
<body>
<div id="map-canvas"></div>
</body>
y, por la razón que sea, CSS que se ve así:
h1 { font-size: 18px; }
#map-canvas h1 { font-size: 32px; }
¿Puedes ver el problema? Cuando los intentos de API para realizar las medidas para su infoWindow(inmediatamente antes de mostrarla), la h1parte del contenido tendrá un tamaño de 18px(debido a que el "div medir" temporal se anexa al cuerpo), pero cuando la API realidad coloca el infoWindowsobre el mapa, el #map-canvas h1selector tendrá prioridad haciendo que el tamaño de la fuente sea muy diferente de lo que era cuando la API midió el tamaño del infoWindowy, en esta circunstancia, siempre obtendrá barras de desplazamiento.
Puede haber matices más ligeramente diferentes por la razón específica por la que tiene barras de desplazamiento en su infoWindow, pero la razón detrás de esto es por esto:
Las mismas reglas de CSS deben aplicarse al contenido dentro de usted, infoWindow
independientemente de dónde aparezca el elemento HTML real en el marcado. Si no es así, se le garantizará que obtendrá barras de desplazamiento en su ventana de información.
Entonces, lo que siempre hago es algo como esto:
infoWindow.setContent('<div class="info-window-content">...your content here...</div>');
y en mi CSS:
.info-window-content { ... }
.info-window-content h1 { .... }
.info-window-content p { ... }
etc...
Entonces, no importa dónde la API agregue su medición div, antes del cierre bodyo dentro de una #map-canvas, las reglas CSS que se le apliquen siempre serán las mismas.
EDITAR RE: Familias de fuentes
Google parece estar trabajando activamente en el problema de carga de fuentes (que se describe a continuación) y la funcionalidad ha cambiado muy recientemente, por lo que es posible que vea o no la carga de la fuente Roboto cuando se infoWindowabre por primera vez, según la versión de la API que esté utilizando. Hay un informe de error abierto (aunque en el registro de cambios este informe de error ya estaba marcado como corregido) que ilustra que Google todavía tiene dificultades con este problema.
UNA COSA MÁS: ¡¡¡MIRA A TUS FAMILIAS DE FUENTES !!!
En la última encarnación de la API, Google trató de ser inteligente y envolver el contenido de su ventana de información en algo que pudiera ser dirigido con un selector de CSS - .gm-style-iw. Para las personas que no entendieron las reglas que expliqué anteriormente, esto realmente no ayudó y, en algunos casos, lo empeoró aún más. Las barras de desplazamiento casi siempre aparecían la primera vez que infoWindowse abría una, pero si abría alguna de infoWindownuevo, incluso con el mismo contenido exacto, las barras de desplazamiento desaparecerían. En serio, si no estuvieras confundido antes, esto te haría perder la cabeza. Esto es lo que estaba pasando:
Si observa los estilos que carga Google en la página cuando se carga la API, podrá ver esto:
.gm-style {
font-family: Roboto,Arial,sans-serif
...
}
De acuerdo, Google quería que sus mapas fueran un poco más consistentes haciéndoles siempre usar la Robotofamilia de fuentes. El problema es que, para la mayoría de las personas, antes de abrir un infoWindow, el navegador aún no había descargado la Robotofuente (porque nada más en su página la usaba, por lo que el navegador es lo suficientemente inteligente como para saber que no necesita descargar esta fuente). La descarga de esta fuente no es instantánea, aunque es muy rápida. La primera vez que abra una infoWindowy la API añade el divcon su infoWindowcontenido al cuerpo para llevarlo de mediciones, se inicia la descarga de la Robotofuente, pero sus infoWindow'sse toman las mediciones y la ventana se coloca en el mapa antes Robototermine la descarga. El resultado, con bastante frecuencia, fue uninfoWindowcuyas medidas se tomaron cuando su contenido se renderizó usando Arialo una sans-seriffuente, pero cuando se mostró en el mapa (y Robotohabía terminado de descargarse), su contenido se mostraba en una fuente que era de un tamaño diferente, y listo, las barras de desplazamiento aparecen la primera vez abres el infoWindow. Abra exactamente lo mismo infoWindowpor segunda vez, momento en el que Robotose ha descargado y se utilizará cuando la API esté tomando sus medidas de infoWindowcontenido y no verá ninguna barra de desplazamiento.