javascript - personalizar - Google Maps API v3: InfoWindow no dimensiona correctamente

multiple infowindows google maps

Question

Parece que InfoWindow, al hacer clic en el ícono de inicio en mi Google Maps v3, no se ajusta automáticamente al contenido de InfoWindow.

Da barras de desplazamiento cuando no debería. La ventana de información debe tener el tamaño adecuado.

Alguna idea sobre por qué?

Por solicitud, el JavaScript relevante que inyecta el HTML para InfoWindow:

listing = ''<div>Content goes here</div>'';

ACTUALIZAR

Este error fue manejado por Google en cuestión

https://issuetracker.google.com/issues/35823659

La solución se implementó en febrero de 2015 en la versión 3.19 de Maps JavaScript API.

Answer 1

Agregar lo siguiente a mi CSS me gustó:

white-space: nowrap;

Answer 2

Agregue un div dentro de su ventana de información

<div id=/"mydiv/">YourContent</div>

Luego configura el tamaño usando css. funciona para mi. ¡Esto asume que todos los infowindows son del mismo tamaño!

#mydiv{
width:500px;
height:100px;
}

Answer 3

Agregue una min-height a su elemento de clase infoWindow.

Eso resolverá el problema si tus ventanas de información son todas del mismo tamaño.

De lo contrario, agregue esta línea de jQuery a su función de clic para la ventana de información:

//remove overflow scrollbars
$(''#myDiv'').parent().css(''overflow'','''');

Answer 4

Creo que este comportamiento se debe a cierto estilo css en un contenedor externo, tuve el mismo problema, pero lo resolví usando un div interno y agregué algo de relleno, sé que es raro pero resolvió el problema

<div id="fix_height">
<h2>Title</h2>
<p>Something</p>
</div>

Y en mi style.css

div#fix_height{
padding: 5px;
}

Answer 5

Debe dar el contenido a InfoWindow desde el objeto jQuery.

var $infoWindowContent = $("<div class=''infowin-content''>Content goes here</div>");
var infoWindow = new google.maps.InfoWindow();
infowindow.setContent($infoWindowContent[0]);

Answer 6

Estaba teniendo el mismo problema con IE y probé muchas de las correcciones detalladas en estas respuestas, pero no pude eliminar las barras de desplazamiento verticales en IE de manera confiable.

Lo que funcionó mejor para mí fue cambiar a tamaños de fuente fijos dentro de la ventana de información - ''px'' ... Estaba usando ems. Al corregir el tamaño de la fuente, ya no necesitaba declarar explícitamente el ancho o alto de la ventana de información y las barras de desplazamiento se habían ido para siempre.

Answer 7

Estaba teniendo el mismo problema, particularmente notable cuando mi elemento <h2> se envolvió en una segunda línea.

Apliqué una clase a <div> en la ventana de información, y cambié las fuentes a una fuente genérica del sistema (en mi caso, Helvetica) frente a una fuente web @ font-face que había estado usando. Problema resuelto

Answer 8

Esto funciona para mí Pon un div en el setContent

sh_map.infoWindow.setContent([
''<div id=/"mydiv/">'',
''Your content goes here'',
].join(''''));

A continuación, agregue este CSS a su página:

<style type="text/css">
#map-canvas {
text-align: center;
vertical-align: middle;
}
#mydiv {
font-family: "Comic Sans MS", cursive;
font-size: 10px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
letter-spacing: normal;
text-align: center;
vertical-align: middle;
word-spacing: normal;
}
</style>

Por ejemplo, vea http://www.student-homes-northampton.co.uk ; haga clic en los enlaces debajo de las fotos de la casa para mostrar el mapa de Google.

Answer 9

Esto resolvió mi problema por completo:

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

Answer 10

He probado todas estas soluciones y ninguna funcionó. Después de un poco de prueba y error lo descubrí.

<style type="text/css">
#map_canvas {
line-height:normal;
}
</style>

Establecer altura de línea: normal para la div del lienzo del mapa.

Answer 11

Intenté cada una de las respuestas enumeradas. Ninguno funcionó para mí. Esto finalmente lo arregló PERMANENTEMENTE. El código que heredé tenía un contenedor DIV alrededor de todas las entradas <h#> y <p> . Simplemente forcé un poco de "estilo" en el mismo DIV, teniendo en cuenta el ancho máximo deseado, añadí el cambio de altura de la línea por las dudas (la corrección de otra persona) y mi propio white-space: nowrap , que luego hizo que el desbordamiento automático los ajustes correctos. Sin barra de desplazamiento, sin truncamiento y sin problemas.

html = ''<div class="map-overlay" style="max-width: 400px;
line-height: normal;
white-space: nowrap;
overflow: auto;
">'';

Answer 12

Mi respuesta es agregar un oyente (usando addListenerOnce) para verificar si la ventana de información se ha agregado al DOM, luego abriendo de nuevo la ventana de información (sin necesidad de cerrarla).

// map, marker and infoWindow code, we''ll call them
// myMap, myMarker and myInfoWindow
myInfoWindow.open(myMap, myMarker);
google.maps.event.addListenerOnce(myInfoWindow, ''domready'', function(){
myInfoWindow.open(myMap, myMarker);
});

Answer 13

No era aceptable para mí codificar el ancho y alto de la ventana de información, ni configurar white-space: nowrap , la solución de maxWidth no me ayudó y todo lo demás tampoco funcionaba o era inapropiado para mi caso de uso

Mi solución fue establecer el contenido, abrir la ventana y luego, cuando se domready evento domready , establecer la propiedad CSS de height en el contenido a cualquier altura, y luego obligar a Google Maps a cambiar el tamaño de la ventana de información en consecuencia.

infoWindow es el objeto InfoWindow, $infoWindowContents es un objeto Jquery de los contenidos que quiero poner allí, el map es mi objeto Map. marker is a marker which was clicked.

infoWindow.setContent($infoWindowContents.get(0));
var listener = google.maps.event.addListener(infoWindow, ''domready'', function() {
// Stop listening, otherwise the listeners stack up if the window is opened again
google.maps.event.removeListener(listener);
// Set the height on the container to however tall the browser is currently rendering it
$infoWindowContents.height($infoWindowContents.height());
// Force Google Maps to recalculate the InfoWindow height
infoWindow.setContent($infoWindowContents.get(0));
});
infoWindow.open(map, marker);

(I posted the same solution over on a similar question How do I get a google-maps InfoWindow to resize to fit the content that is placed inside of it? )

Answer 14

No pude hacer que funcionara de ninguna forma o forma, estaba incluyendo 3 divisiones en la caja. Los envolví en una div externa, con anchuras y alturas configuradas correctamente, y nada funcionó.

Al final lo arreglé estableciendo el div como absoluto superior izquierdo, y luego antes del div, establecí dos imágenes, una de 300 px de ancho y 1 px de alto, una de 120 px de alto y 1 de ancho, de un gif transparente.

¡Escalado correctamente entonces!

Es feo pero funciona.

También podría hacer una imagen y establecer un zindex que espero, o incluso una sola imagen si su ventana no tiene interacción, pero esto contenía un formulario, entonces, esa no era una opción ...

Answer 15

Parece que el problema es con el webfont de Roboto.

La ventana de información se representa con propiedades de ancho y alto en línea en función del contenido proporcionado. Sin embargo, no se calcula con la fuente web ya procesada / cargada. Una vez que la fuente se representa DESPUÉS de que se imprime todo el mapa en la pantalla, hace que las barras de desplazamiento aparezcan debido a las propiedades de "desbordamiento: automático" en línea dentro de los DIV de la ventana.

La solución que encontré para trabajar es envolver el contenido en un DIV y luego aplicar CSS para anular la fuente web:

.gmap_infowin {
font-family: sans-serif !important;
font-weight: normal !important;
}
<div class="gmap_infowin">Your info window content here.</div>

Answer 16

Respuesta corta: establezca la propiedad de opciones maxWidth en el constructor . Sí, incluso si establecer el ancho máximo no era lo que quería hacer.

Una historia más larga: Migrando un mapa v2 a v3, vi exactamente el problema descrito. Windows variaba en ancho y alto, y algunos tenían barras de desplazamiento verticales y otros no. Algunos habían <br /> incrustado en los datos, pero al menos uno con ese tamaño OK.

No pensé que la propiedad InfoWindowsOptions.maxWidth fuera relevante, ya que no me importaba restringir el ancho ... pero al configurarlo con el constructor InfoWindow, obtuve lo que quería, y ahora las ventanas se autosize (verticalmente) y muestra el contenido completo sin una barra de desplazamiento vertical. No tiene mucho sentido para mí, ¡pero funciona!

Ver: http://fortboise.org/maps/sailing-spots.html

Answer 17

Sé que este es un hilo viejo, pero acabo de encontrar el mismo problema. Tenía elementos <h2> y <p> en InfoWindow, y estos tenían márgenes inferiores. Quité los márgenes e InfoWindow clasificó correctamente. Ninguna de las otras soluciones sugeridas funcionó. Sospecho que el cálculo del tamaño de InfoWindow no tiene en cuenta los márgenes.

Answer 18

Sé que muchas otras personas han encontrado soluciones que funcionaron para su caso particular, pero como ninguna de ellas funcionaba para mi caso particular, pensé que esto podría ser útil para otra persona.

Algunos detalles:

Estoy usando google maps API v3 en un proyecto donde CSS en línea es algo que realmente queremos evitar. Mis ventanas de información funcionaban para todo, excepto para IE11, donde el ancho no se calculó correctamente. Esto dio como resultado desbordamientos div, que activaron las barras de desplazamiento.

Tenía que hacer tres cosas:

1. Eliminar toda la pantalla: reglas de estilo de bloque en línea de cualquier cosa dentro del contenido de la ventana de información (reemplacé con pantalla: bloque) - tuve la idea de probar esto a partir de un hilo (que no puedo encontrar más) donde alguien estaba teniendo el mismo problema con IE6.

2. Pase el contenido como un nodo DOM en lugar de como una cadena. Estoy usando jQuery, así que podría hacer esto reemplazando: infowindow.setContent(infoWindowDiv.html()); con infowindow.setContent($(infoWindowDiv.html())[0]); Esto resultó ser más fácil para mí, pero hay muchas otras maneras de obtener el mismo resultado.

3. Utilice el truco "setMaxWidth" - configure la opción MaxWidth en el constructor - configurar la opción más tarde no funciona. Si realmente no desea un ancho máximo, simplemente configúrelo en un número muy grande.

No sé por qué funcionó, y no estoy seguro de si un subconjunto de ellos funcionaría. Sé que ninguno de ellos funciona para todos mis casos de uso de forma individual, y que 2 + 3 no funciona. No tuve tiempo de probar 1 + 2 o 1 + 3.

Answer 19

Si nada más, intente agregar el contenido después de que se haya abierto la ventana. Esto debería obligarlo a cambiar el tamaño.

infoWindow = new google.maps.InfoWindow()
infoWindow.open(map, marker)
infoWindow.setContent(content)

Answer 20

Solo para resumir todas las soluciones que funcionaron para mí en todos los navegadores:

• No use márgenes dentro de la ventana de información, solo relleno.

• Establezca un ancho máximo para la ventana de información:

  this.infowindow = new google.maps.InfoWindow({ maxWidth: 200 });

• Envuelva el contenido de la ventana de información con

  <div style="overflow:hidden;line-height:1.35;min-width:200px;">*CONTENT*</div>

  (cambie el min-ancho para el valor que establece en la ventana de información maxWidth)

Lo probé y funcionó en todos los navegadores, y tenía más de 400 marcadores ...

Answer 21

También es importante la altura del contenedor del mapa. Si a infoVentana pequeña siempre estará en 80px de altura. De maxWidth contrario, maxWidth y #innerDiv fix funcionan como un amuleto.

Answer 22

Tenía un elemento en línea (una etiqueta) directamente dentro del div con style="overflow:auto"[... envolvió eso en una etiqueta p y lo arregló.

Parece que cualquier elemento en línea que no esté anidado en un elemento de bloque directamente dentro de la ventana de información provocará esto.

Answer 23

Utilice el evento domready y vuelva a abrir la ventana de información y muestre el contenido oculto después de que el evento domready se dispare dos veces para asegurarse de que se hayan cargado todos los elementos dom.

// map is created using google.maps.Map()
// marker is created using google.maps.Marker()
// set the css for the content div .infowin-content { visibility: hidden; }
infowindow = new google.maps.InfoWindow();
infowindow.setContent("<div class=''infowin-content''>Content goes here</div>");
infowindow.setPosition(marker.getPosition());
infowindow.set("isdomready", false);
infowindow.open(map);
// On Dom Ready
google.maps.event.addListener(infowindow, ''domready'', function () {
if (infowindow.get("isdomready")) {
// show the infowindow by setting css
jQuery(''.infowin-content'').css(''visibility'', ''visible'');
}
else {
// trigger a domready event again.
google.maps.event.trigger(infowindow, ''content_changed'');
infowindow.set("isdomready", true);
}
}

Intenté simplemente hacer un setTimeout (/ * show infowin callback * /, 100), pero a veces eso no funcionaba aún si el contenido (es decir, imágenes) tardaba demasiado en cargarse.

Espero que esto funcione para usted.

Answer 24

Voy a agregar mi respuesta a la lista, ya que NINGUNO de estos solucionó mi problema. Terminé envolviendo mi contenido en un div, dándole a ese div una clase, y especificando el min-width en el div, Y especificando el maxWidth en el infoWindow, Y ambos tenían que ser del mismo tamaño, de lo contrario, el ancho o el ancho la altura se desbordará en cajas con la cantidad de contenido incorrecta.

Javascript:

// Set up the content for the info box
var content = "<div class=''infowindow-content''>" + content + "</div>";
// create a map info box
var infoWindow = new google.maps.InfoWindow({
maxWidth: 350,
content: content
});

CSS:

div.infowindow-content {
min-width: 350px;
}

Answer 25

Bastante gracioso, mientras que el siguiente código corregirá la barra de desplazamiento ANCHO:

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

Se tardó esto en corregir la barra de desplazamiento HEIGHT:

 .gm-style-iw div
{
overflow: hidden !important;
}

EDITAR: Agregar espacio en blanco: nowrap; cualquiera de los estilos puede corregir el problema de espaciado que parece persistir cuando se eliminan las barras de desplazamiento. Gran punto Nathan.

Answer 26

EDITADO (para destacar): créame, de las cien respuestas a esta pregunta, este es el único correcto que también explica POR QUÉ está sucediendo

Ok, entonces 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 es necesario que especifique width''s o height''s en nada para que su infoWindow se muestre sin barras de desplazamiento, aunque a veces accidentalmente puede funcionar haciendo esto (pero eventualmente fallará).

En segundo lugar, Google Maps API 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 dices a la API de Google Maps que 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);

A todos los efectos, Google Maps coloca temporalmente un div al final de la página (en realidad crea un detached DOM tree , pero es conceptualmente más fácil de entender si digo que imaginas que un div está ubicado al final de tu página ) con el contenido HTML que especificó A continuación, mide ese div (lo que significa que, en este ejemplo, se aplicarán las reglas de CSS en mi documento a las etiquetas h1 p ) para obtener su width y height . Google luego toma ese div , le asigna las medidas que recibió cuando se adjuntó a su página, y lo coloca en el mapa en la ubicación que ha especificado.

Aquí es donde ocurre el problema para muchas personas: pueden tener HTML que se ve así:

<body>
<div id="map-canvas"><!-- google map goes here --></div>
</body>

y, por cualquier razón, CSS que se ve así:

h1 { font-size: 18px; }
#map-canvas h1 { font-size: 32px; }

¿Puedes ver el problema? Cuando la API intenta tomar las medidas para su infoWindow (inmediatamente antes de mostrarla), la parte h1 del contenido tendrá un tamaño de 18px (porque el " 18px medición" temporal se agrega al cuerpo), pero cuando la API realmente coloca la infoWindow en el mapa, el selector #map-canvas h1 tendrá prioridad haciendo que el tamaño de la fuente sea muy diferente de lo que era cuando la API midió el tamaño de la infoWindow y en esta circunstancia siempre obtendrá barras de desplazamiento.

Puede haber matices 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 debido a esto:

Las mismas reglas de CSS deben aplicarse al contenido dentro de su infoWindow independientemente de dónde aparezca el elemento HTML real en el marcado. Si no lo hacen, entonces se garantizará que obtengas barras de desplazamiento en tu 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...

Por lo tanto, no importa dónde se agregue el API, es div medición: antes del body cierre o dentro de un #map-canvas , las reglas de CSS aplicadas siempre serán las mismas.

EDITAR RE: Familias de fuentes

Google parece estar trabajando activamente en el problema de carga de la fuente (descrito a continuación) y la funcionalidad ha cambiado muy recientemente por lo que puede o no ver la carga de la fuente Roboto cuando se abre la infoWindow primera vez, dependiendo de la versión de la API que está utilizando . Hay un informe de error abierto (aunque en el changelog este informe de error ya estaba marcado como fijo) que ilustra que Google todavía tiene dificultades con este problema.

UNA COSA MÁS: ¡MIRA TUS FONT FAMILIES!

En la última encarnación de la API, google intentó ser inteligente y envolver su contenido de información de la ventana en algo que podría 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 hizo aún peor. Las barras de desplazamiento casi siempre aparecerían la primera vez que se abriera una infoWindow , pero si infoWindow abrir cualquier infoWindow , incluso con el mismo contenido, 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 Google carga en la página cuando se carga la API, podrá ver esto:

.gm-style {
font-family: Roboto,Arial,sans-serif
...
}

Ok, Google quería hacer que sus mapas fueran un poco más consistentes al hacerles usar siempre la familia de fuentes Roboto . El problema es que, para la mayoría de las personas, antes de abrir una infoWindow , el navegador aún no había descargado la fuente Roboto (porque nada más en su página lo usaba, por lo que el navegador es lo suficientemente inteligente como para saber que no necesita para descargar esta fuente). Descargar esta fuente no es instantáneo, aunque es muy rápido. La primera vez que abre una infoWindow y la API agrega el div con su contenido infoWindow al cuerpo para tomar sus medidas, comienza a descargar la fuente Roboto , pero se infoWindow''s medidas de su ventana de información y se coloca la ventana en el mapa antes de que Roboto termine la descarga . El resultado, muy a menudo, era una infoWindow cuyas mediciones se tomaron cuando se infoWindow el contenido usando Arial o una sans-serif , pero cuando se mostró en el mapa (y Roboto había terminado de descargar) su contenido se mostraba en una fuente ese era un tamaño diferente, y las barras de desplazamiento aparecen la primera vez que abre la infoWindow . Abra exactamente la misma infoWindow por segunda vez; en ese momento, el Roboto habrá descargado y se usará cuando la API tome sus medidas del contenido de infoWindow y no verá ninguna barra de desplazamiento.

Answer 27

After losing time and reading for a while, I just wanted something simple, this css worked for my requirements.

.gm-style-iw > div { overflow: hidden !important; }

Also is not an instant solution but starring/commenting on the issue might make them fix it, as they believe it is fixed: http://code.google.com/p/gmaps-api-issues/issues/detail?id=5713

Answer 28

Well this is the one that did the trick for me:

.gm-style-iw>div {
overflow: visible !important;
}

Only setting overflow: visible on .gm-style-iw actually made the problem worse! I noticed in the Chrome developer tools inspector that there are two divs inside the .gm-style-iw element, both which have overflow: auto set by default.

I''m displaying quite a lot of HTML-formatted text in my InfoWindows, that might be why the other solutions didn''t work at all for me.

Answer 29

.gm-style-iw{
height: 100% !important;
overflow: hidden !important;
}

esto funciona para mi

Answer 30

//infowindow.setContent(response);
var infowindowopts = {
maxWidth: 274,
content: response
};
infowindow.setOptions(infowindowopts);