API de Google Maps v3: InfoWindow no dimensiona correctamente

Question 1

Parece que mi InfoWindow, cuando hace clic en el icono de inicio en mi Google Maps v3, no se ajusta correctamente al contenido de InfoWindow.

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

¿Alguna idea de por qué?

Por solicitud, el JavaScript relevante que inyecta el HTML para la ventana de información:

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

ACTUALIZAR

Este error fue manejado por Google en cuestión.

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

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

Question 2

Agregue un div dentro de su ventana de información

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

Luego configure el tamaño usando css. funciona para mi. ¡Esto supone que todas las ventanas de información son del mismo tamaño!

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

Question 3

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

Historia más larga: Al migrar un mapa v2 a v3, vi exactamente el problema descrito. Las ventanas variaban en ancho y alto, y algunas tenían barras de desplazamiento verticales y otras no. Algunos tenían <br /> incrustados en los datos, pero al menos uno con ese tamaño estaba bien.

No pensé que la propiedad InfoWindowsOptions.maxWidth fuera relevante, ya que no me importaba limitar el ancho ... pero al configurarlo con el constructor InfoWindow, obtuve lo que quería, y las ventanas ahora se ajustan automáticamente (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

Question 4

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]);

Question 5

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

esto funciona para mi

Question 6

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"><!-- google map goes here --></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.

Question 7

Probé cada una de las respuestas enumeradas. Ninguno funcionó para mí. Esto finalmente lo arregló PERMANENTEMENTE. El código que heredé tenía un DIVenvoltorio alrededor de todas las entradas <h#>y <p>. Simplemente forcé algo de "estilo" en el mismo DIV, teniendo en cuenta el ancho máximo deseado, introduje el cambio de altura de la línea por si acaso (solución de otra persona) y el mío white-space: nowrap, que luego hizo que el desbordamiento automático hiciera 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;
                                       ">';

Question 8

Sé que este es un hilo antiguo, pero acabo de encontrar el mismo problema. Tenía elementos <h2>y <p>en la ventana de información, y ambos tenían márgenes inferiores. Eliminé los márgenes y la ventana de información se dimensionó correctamente. Ninguna de las otras correcciones sugeridas funcionó. Sospecho que el cálculo del tamaño de la ventana de información no tiene en cuenta los márgenes.

Question 9

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 una clase a ese div y especificando min-widthen el div, Y especificando maxWidthen la ventana de información, Y ambos debían tener el mismo tamaño, de lo contrario, el ancho o la altura se desbordarían en cajas con la cantidad incorrecta de contenido.

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;
}

Question 10

Probé 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 el div del lienzo del mapa.

Question 11

Parece que el problema está en la fuente web Roboto.

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

La solución que encontré que funciona 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>

Question 12

Es bastante divertido, mientras que el siguiente código corregirá la barra de desplazamiento ANCHO:

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

}

Se necesitó esto para corregir la barra de desplazamiento ALTURA:

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

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

Question 13

Esto funciona para mi. Pon un diven elsetContent

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

Luego 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, consulte 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.

Question 14

Esto resolvió mi problema por completo:

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

Question 15

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 arreglar 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 desaparecieron para siempre.

Question 16

También es importante la altura del contenedor del mapa. Si es pequeña, la ventana de información siempre tendrá una altura de 80 píxeles. De lo contrario, maxWidthy #innerDivarreglar funciona a las mil maravillas.

Question 17

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

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

Question 18

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 active 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é hacer un setTimeout (/ * show infowin callback * /, 100), pero a veces eso no funcionaba si el contenido (es decir, las imágenes) tardaba demasiado en cargarse.

Espero que esto funcione para usted.

Question 19

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

<div>Apliqué una clase a una 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.

Question 20

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

Question 21

Agregue min-heighta su elemento de clase infoWindow.

Eso resolverá el problema si sus infoWindows 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','');

Question 22

No pude hacer que funcionara de ninguna manera, estaba incluyendo 3 divs en la caja. Los envolví en un div externo, con anchos y alturas todos configurados correctamente, y nada funcionó.

Al final, lo arreglé configurando el div como parte superior izquierda absoluta, y luego, antes del div, configuré dos imágenes, una de 300px de ancho y 1px de alto, una de 120px de alto y 1px de ancho, de un gif transparente.

¡Entonces escaló correctamente!

Es feo pero funciona.

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

Question 23

Creo que este comportamiento se debe a algunos estilos CSS en un contenedor externo, tuve el mismo problema pero lo resolví usando un div interno y agregando algo de relleno, sé que es extraño pero resolvió el problema

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

Y a mi estilo.css

div#fix_height{
    padding: 5px;
}

Question 24

Tenía un elemento en línea (una etiqueta a) directamente dentro del divcon style="overflow:auto"[...envuelto en una petiqueta 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.

Question 25

Mi respuesta es agregar un oyente (usando addListenerOnce) para verificar si la infoWindow se ha agregado al DOM, luego abrir la infoWindow nuevamente (no es necesario 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);
            });

Question 26

Agregar lo siguiente a mi CSS funcionó para mí:

white-space: nowrap;

Question 27

Solo para resumir todas las soluciones que me funcionaron 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 ancho mínimo por el valor que estableció en la ventana de información maxWidth)

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

Question 28

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

Algunos detalles:

Estoy usando la API de Google Maps 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 resultó en desbordamientos de div, que activaron barras de desplazamiento.

Tuve que hacer tres cosas:

Eliminar todas las reglas de estilo display: inline-block de cualquier cosa dentro del contenido de la ventana de información (reemplacé con display: block) - Tuve la idea de probar esto desde un hilo (que ya no puedo encontrar) donde alguien estaba teniendo lo mismo problema con IE6.
Pase el contenido como un nodo DOM en lugar de como una cadena. Estoy usando jQuery, por lo 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 formas de obtener el mismo resultado.
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, configúrelo en un número muy grande.

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

Question 29

No era aceptable para mí codificar de forma rígida el ancho y el alto de la ventana de información, o configurarlo white-space: nowrap, la maxWidthsolución no me ayudó y todo lo demás no funcionó o fue inapropiado para mi caso de uso.

Mi solución fue configurar el contenido, abrir la ventana y luego, cuando se activa el domreadyevento, configurar la heightpropiedad CSS en el contenido a la altura que sea, y luego forzar a Google Maps a cambiar el tamaño de la ventana de información en consecuencia.

infoWindowes el objeto InfoWindow, $infoWindowContentses un objeto Jquery del contenido que quiero poner allí, mapes mi objeto Map. markeres un marcador en el que se hizo clic.

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);

(Publiqué la misma solución en una pregunta similar ¿ Cómo consigo que una InfoWindow de google-maps cambie de tamaño para adaptarse al contenido que se coloca dentro de ella? )

Question 30

Después de perder tiempo y leer por un tiempo, solo quería algo simple, este CSS funcionó para mis requisitos.

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

Además, no es una solución instantánea, pero destacar / comentar el problema podría hacer que lo solucionen, ya que creen que está solucionado: http://code.google.com/p/gmaps-api-issues/issues/detail?id= 5713

Question 31

Bueno, este es el que me hizo el truco:

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

Sólo el establecimiento overflow: visibleen .gm-style-iwrealidad empeorado el problema! Noté en el inspector de herramientas para desarrolladores de Chrome que hay dos divs dentro del .gm-style-iwelemento, ambos overflow: autoconfigurados de forma predeterminada.

Estoy mostrando una gran cantidad de texto en formato HTML en mi InfoWindows, esa podría ser la razón por la que las otras soluciones no funcionaron en absoluto para mí.

Answer 1

83

Parece que mi InfoWindow, cuando hace clic en el icono de inicio en mi Google Maps v3, no se ajusta correctamente al contenido de InfoWindow.

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

¿Alguna idea de por qué?

Por solicitud, el JavaScript relevante que inyecta el HTML para la ventana de información:

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

ACTUALIZAR

Este error fue manejado por Google en cuestión.

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

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

javascript html css google-maps JacobT
fuente

mejor copiar el código relevante en su pregunta. De lo contrario, esta pregunta no tendrá sentido cuando cambie el código de su sitio.

Jonathan Fingland

Bueno, ese es el punto en realidad. Tengo entendido que se supone que la API de Google Maps v3 se ajusta automáticamente independientemente de mi CSS ... y no es así. Pero publicaré el código de todos modos

JacobT

7

Sé que esto es antiguo, pero en caso de que alguien llegue aquí e intente todo y aún tenga un problema (como yo): las ventanas de información tienen una altura máxima proporcional a las dimensiones de su mapa. Esto es más pequeño que v2. Entonces, si está actualizando de v2 a v3 y tiene este problema, podría deberse a esto. Haga su contenido más corto, o su mapa más largo, o baje a v2.

Cassie

Answer 2

mejor copiar el código relevante en su pregunta. De lo contrario, esta pregunta no tendrá sentido cuando cambie el código de su sitio.

Jonathan Fingland

Answer 3

Bueno, ese es el punto en realidad. Tengo entendido que se supone que la API de Google Maps v3 se ajusta automáticamente independientemente de mi CSS ... y no es así. Pero publicaré el código de todos modos

JacobT

Answer 4

7

Sé que esto es antiguo, pero en caso de que alguien llegue aquí e intente todo y aún tenga un problema (como yo): las ventanas de información tienen una altura máxima proporcional a las dimensiones de su mapa. Esto es más pequeño que v2. Entonces, si está actualizando de v2 a v3 y tiene este problema, podría deberse a esto. Haga su contenido más corto, o su mapa más largo, o baje a v2.

Cassie

Answer 5

32

Agregue un div dentro de su ventana de información

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

Luego configure el tamaño usando css. funciona para mi. ¡Esto supone que todas las ventanas de información son del mismo tamaño!

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

Harry
fuente

Exactamente. Mismo tamaño o crea suficientes clases en su CSS con diferentes dimensiones.

Elijah Saounkine

dependiendo de cómo esté trabajando con sus ventanas de información, podría ser más seguro usar una clase en lugar de una ID, para evitar ID duplicados flotando en la misma página, por ejemplo <div class=\"mydiv\">YourContent</div>y.mydiv{ width:500px; height:100px; }

StackExchange What The Heck

Funciona en computadoras de escritorio, pero no en dispositivos móviles (Android) /

user2060451

Answer 6

Exactamente. Mismo tamaño o crea suficientes clases en su CSS con diferentes dimensiones.

Elijah Saounkine

Answer 7

dependiendo de cómo esté trabajando con sus ventanas de información, podría ser más seguro usar una clase en lugar de una ID, para evitar ID duplicados flotando en la misma página, por ejemplo <div class=\"mydiv\">YourContent</div>y.mydiv{ width:500px; height:100px; }

StackExchange What The Heck

Answer 8

Funciona en computadoras de escritorio, pero no en dispositivos móviles (Android) /

user2060451

Answer 9

31

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

Historia más larga: Al migrar un mapa v2 a v3, vi exactamente el problema descrito. Las ventanas variaban en ancho y alto, y algunas tenían barras de desplazamiento verticales y otras no. Algunos tenían <br /> incrustados en los datos, pero al menos uno con ese tamaño estaba bien.

No pensé que la propiedad InfoWindowsOptions.maxWidth fuera relevante, ya que no me importaba limitar el ancho ... pero al configurarlo con el constructor InfoWindow, obtuve lo que quería, y las ventanas ahora se ajustan automáticamente (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

fortboise
fuente

2

En caso de que alguien más intente establecer maxWidthun porcentaje, los mapas de Google reconocerán un flotante como un porcentaje del elemento principal y lo convertirán al equivalente en píxeles: declare {"maxWidth":0.25}, el elemento principal tiene 1000px de ancho, InfoWindow tendrá un width: 250px. No creo que sea posible forzar que el ancho de InfoWindow siga siendo un porcentaje (el valor de maxWidthdebe ser un número, por {"maxWidth":"25%"}lo que no funcionará y {"maxWidth":25%}se trata como un módulo de 25 indefinido y desencadena un error de sintaxis).

jacob

Interesante. La documentación actual de Google dice que la propiedad google.maps.InfoWindowOptions.maxWidth es "un número", y hemos inferido unidades de píxeles. No hay ninguna razón por la que el analizador no pueda aceptar también un número decimal e interpretarlo como una fracción ... y dejarlo como una "característica" no documentada. Excepto tal vez el sentido común.

fortboise

1

Ok, +1 por trabajar muy bien, pero ¿por qué siempre termino en esa página de navegación cuando investigo la funcionalidad de gMap?

Bill Blankenship

14

Esto puede haber funcionado en 2010, pero no ayuda a partir de 2014.

Simon East

1

@Simon año nuevo, nuevos problemas ... ¿alguna solución esta vez?

Phil Cooper

Answer 10

2

En caso de que alguien más intente establecer maxWidthun porcentaje, los mapas de Google reconocerán un flotante como un porcentaje del elemento principal y lo convertirán al equivalente en píxeles: declare {"maxWidth":0.25}, el elemento principal tiene 1000px de ancho, InfoWindow tendrá un width: 250px. No creo que sea posible forzar que el ancho de InfoWindow siga siendo un porcentaje (el valor de maxWidthdebe ser un número, por {"maxWidth":"25%"}lo que no funcionará y {"maxWidth":25%}se trata como un módulo de 25 indefinido y desencadena un error de sintaxis).

jacob

Answer 11

Interesante. La documentación actual de Google dice que la propiedad google.maps.InfoWindowOptions.maxWidth es "un número", y hemos inferido unidades de píxeles. No hay ninguna razón por la que el analizador no pueda aceptar también un número decimal e interpretarlo como una fracción ... y dejarlo como una "característica" no documentada. Excepto tal vez el sentido común.

fortboise

Answer 12

1

Ok, +1 por trabajar muy bien, pero ¿por qué siempre termino en esa página de navegación cuando investigo la funcionalidad de gMap?

Bill Blankenship

Answer 13

14

Esto puede haber funcionado en 2010, pero no ayuda a partir de 2014.

Simon East

Answer 14

1

@Simon año nuevo, nuevos problemas ... ¿alguna solución esta vez?

Phil Cooper

Answer 15

25

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]);

Baris Aydinoglu
fuente

4

Ok, esto está funcionando bien, muchas gracias ... Ahora quiero saber por qué :)

Jeremy F.

2

Esta es una de las soluciones más extrañas que he visto. Ninguno de los otros trucos para esta pregunta funcionó para mí, excepto este. Increíble.

monoceres

3

Por alguna razón, parece que la API de mapas no se coloca overflow: autoen InfoWindow DIV cuando pasa nodos DOM en lugar de una cadena. Esto resuelve el problema si el contenido solo aparece entre 1 y 2 píxeles. Desafortunadamente, esto significa que el contenido más largo en realidad se cuelga de la ventana de información en lugar de agregar barras de desplazamiento.

Simon East

Si bien esto funciona, es bastante desagradable pedirle a la gente que incluya jQuery en la página simplemente para que se infoWindow'smuestre correctamente. La respuesta completa de por qué esto funciona se enumera en mi respuesta: jQuerycrea un árbol DOM separado que obliga al contenido a renderizarse correctamente y su tamaño se determina con precisión antes de que Google intente colocarlo infoWindowen el mapa

Adam

Answer 16

4

Ok, esto está funcionando bien, muchas gracias ... Ahora quiero saber por qué :)

Jeremy F.

Answer 17

2

Esta es una de las soluciones más extrañas que he visto. Ninguno de los otros trucos para esta pregunta funcionó para mí, excepto este. Increíble.

monoceres

Answer 18

3

Por alguna razón, parece que la API de mapas no se coloca overflow: autoen InfoWindow DIV cuando pasa nodos DOM en lugar de una cadena. Esto resuelve el problema si el contenido solo aparece entre 1 y 2 píxeles. Desafortunadamente, esto significa que el contenido más largo en realidad se cuelga de la ventana de información en lugar de agregar barras de desplazamiento.

Simon East

Answer 19

Si bien esto funciona, es bastante desagradable pedirle a la gente que incluya jQuery en la página simplemente para que se infoWindow'smuestre correctamente. La respuesta completa de por qué esto funciona se enumera en mi respuesta: jQuerycrea un árbol DOM separado que obliga al contenido a renderizarse correctamente y su tamaño se determina con precisión antes de que Google intente colocarlo infoWindowen el mapa

Adam

Answer 20

22

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

esto funciona para mi

Rejeesh Prarath
fuente

Esta no es una gran solución ya que cualquier contenido que sea más grande que la ventana de información se cortará y ocultará.

Simon East

No es perfecto para contenido de longitud variable, pero mi contenido es más o menos el mismo para cada puntero aplicando un ancho! ¡Importante y alto! ¡Importante fue una solución suficiente para mí!

Jimbo Jones

Answer 21

Esta no es una gran solución ya que cualquier contenido que sea más grande que la ventana de información se cortará y ocultará.

Simon East

Answer 22

No es perfecto para contenido de longitud variable, pero mi contenido es más o menos el mismo para cada puntero aplicando un ancho! ¡Importante y alto! ¡Importante fue una solución suficiente para mí!

Jimbo Jones

Answer 23

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"><!-- google map goes here --></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.

Answer 24

Algún gran detalle ahí Adam, y sí descubrí cosas parecidas a ti. Sin embargo, el error como lo informa a Google hace realidad parece todavía ocurrir incluso con las fuentes del sistema y no hay selectores CSS descendiente. Vea este ejemplo (tiene una barra de desplazamiento en Chrome 40 Win).

Simon East

Answer 25

@Simon: tienes razón, el enlace que enviaste es un error (caso extremadamente extremo, pero un error de todos modos). Me imagino que> 98% de las veces, cuando las personas informan que su información tiene Windows y no saben por qué, es debido a los problemas que se abordan en esta respuesta.

Adam

Answer 26

Adán. Muchas gracias por dar esta respuesta. ¡Me salvaste un montón de piratería innecesaria!

Abram

Answer 27

13

Probé cada una de las respuestas enumeradas. Ninguno funcionó para mí. Esto finalmente lo arregló PERMANENTEMENTE. El código que heredé tenía un DIVenvoltorio alrededor de todas las entradas <h#>y <p>. Simplemente forcé algo de "estilo" en el mismo DIV, teniendo en cuenta el ancho máximo deseado, introduje el cambio de altura de la línea por si acaso (solución de otra persona) y el mío white-space: nowrap, que luego hizo que el desbordamiento automático hiciera 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;
                                       ">';

usuario2656824
fuente

7

¡Éste! Trabajé a través de todas las respuestas sin éxito hasta que llegué aquí. En mi caso, era el white-space: nowrapque tenía la magia, los otros estilos eran innecesarios. ¡Salud!

Xavier Holt

De hecho, esto parece funcionar, sin embargo, se tuvo que hacer clic en algunas de las ventanas de información más de una vez ... mi solución final fue combinar esta respuesta con la de Concept211 agregando font-family: sans-serif !important; font-weight: normal !important;CSS.

Sparky

Desafortunadamente, si tiene líneas largas, las líneas se cortarán en lugar de envolver. No es una solución ideal a menos que sepa que todas sus líneas son cortas.

Simon East

Answer 28

7

¡Éste! Trabajé a través de todas las respuestas sin éxito hasta que llegué aquí. En mi caso, era el white-space: nowrapque tenía la magia, los otros estilos eran innecesarios. ¡Salud!

Xavier Holt

Answer 29

De hecho, esto parece funcionar, sin embargo, se tuvo que hacer clic en algunas de las ventanas de información más de una vez ... mi solución final fue combinar esta respuesta con la de Concept211 agregando font-family: sans-serif !important; font-weight: normal !important;CSS.

Sparky

Answer 30

Desafortunadamente, si tiene líneas largas, las líneas se cortarán en lugar de envolver. No es una solución ideal a menos que sepa que todas sus líneas son cortas.

Simon East

Answer 31

10

Sé que este es un hilo antiguo, pero acabo de encontrar el mismo problema. Tenía elementos <h2>y <p>en la ventana de información, y ambos tenían márgenes inferiores. Eliminé los márgenes y la ventana de información se dimensionó correctamente. Ninguna de las otras correcciones sugeridas funcionó. Sospecho que el cálculo del tamaño de la ventana de información no tiene en cuenta los márgenes.

Miguel
fuente

1

Tenía este problema y ninguna de las otras soluciones funcionó, pero esta sí. Gracias :)

Ian Dunn

Esto se aplica a todos los márgenes utilizados dentro de la ventana.

ZMorek

2

Todavía tenía problemas, pero acabo de envolver todo en Se <div style='overflow:hidden;'></div>ve bien ahora.

ZMorek

Answer 32

1

Tenía este problema y ninguna de las otras soluciones funcionó, pero esta sí. Gracias :)

Ian Dunn

Answer 33

Esto se aplica a todos los márgenes utilizados dentro de la ventana.

ZMorek

Answer 34

2

Todavía tenía problemas, pero acabo de envolver todo en Se <div style='overflow:hidden;'></div>ve bien ahora.

ZMorek

Answer 35

10

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 una clase a ese div y especificando min-widthen el div, Y especificando maxWidthen la ventana de información, Y ambos debían tener el mismo tamaño, de lo contrario, el ancho o la altura se desbordarían en cajas con la cantidad incorrecta de contenido.

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;
}

Jen
fuente

2

Establecer un min-widthcontenido fue lo único que funcionó para mí también. maxWidthSin embargo, no tuve que configurar el en la ventana de información.

Mark Parnell

1

@MarkParnell = asegúrese de probar a fondo. ¡Estaba teniendo problemas cuando tenía más de una cierta cantidad de texto con un ancho determinado! Si sabes cuál será el contenido, entonces no es problema :)

Jen

Muchas gracias ... esto también me ayudó. En la vista móvil le di maxWidth: 350. todavía estaba tomando un valor aleatorio. con la ayuda de min-width funciona bien.

DShah

Answer 36

2

Establecer un min-widthcontenido fue lo único que funcionó para mí también. maxWidthSin embargo, no tuve que configurar el en la ventana de información.

Mark Parnell

Answer 37

1

@MarkParnell = asegúrese de probar a fondo. ¡Estaba teniendo problemas cuando tenía más de una cierta cantidad de texto con un ancho determinado! Si sabes cuál será el contenido, entonces no es problema :)

Jen

Answer 38

Muchas gracias ... esto también me ayudó. En la vista móvil le di maxWidth: 350. todavía estaba tomando un valor aleatorio. con la ayuda de min-width funciona bien.

DShah

Answer 39

8

Probé 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 el div del lienzo del mapa.

Mella
fuente

¡si! La altura de la línea es lo que me lo arregló también. nada más funcionó. específicamente, tenía la altura de línea establecida en mi hoja de estilo en {line-height: 1.3; }. Lo cambié a {line-height: 1.3em} y resolvió el problema.

tbradley22

o alternativamente, puede establecer la altura de la línea del contenedor de mapas div en normal como se indica arriba.

tbradley22

No hay #map_canvasen Google Maps v3 que pueda ver. Debe ser del antiguo v2.

Simon East

@Simon #map_canvases el div que usas para el mapa. Puede ser el nombre que quieras.

Nick

Desafortunadamente, no ayuda. Este violín todavía muestra una barra de desplazamiento en Chrome: jsfiddle.net/simoneast/dckxp62o

Simon East

Answer 40

¡si! La altura de la línea es lo que me lo arregló también. nada más funcionó. específicamente, tenía la altura de línea establecida en mi hoja de estilo en {line-height: 1.3; }. Lo cambié a {line-height: 1.3em} y resolvió el problema.

tbradley22

Answer 41

o alternativamente, puede establecer la altura de la línea del contenedor de mapas div en normal como se indica arriba.

tbradley22

Answer 42

No hay #map_canvasen Google Maps v3 que pueda ver. Debe ser del antiguo v2.

Simon East

Answer 43

@Simon #map_canvases el div que usas para el mapa. Puede ser el nombre que quieras.

Nick

Answer 44

Desafortunadamente, no ayuda. Este violín todavía muestra una barra de desplazamiento en Chrome: jsfiddle.net/simoneast/dckxp62o

Simon East

Answer 45

8

Parece que el problema está en la fuente web Roboto.

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

La solución que encontré que funciona 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>

Concepto211
fuente

esta solución funciona para mí. También ocultar el desplazamiento funciona: .gm-style-iw {overflow: hidden! Important;} pero esto ocultará parte del contenido en infoWindow

Imaginary

+1 ¡sí! Pero combiné esta respuesta con la de user2656824 .

Sparky

+1 porque es la única respuesta que parece reconocer finalmente el hecho de que esto se debe a los problemas de fuentes de Roboto. No me sorprendería que otras fuentes también se procesen incorrectamente. el problema es que .gm-style-iw calcula una altura un poquito menor de la necesaria, probablemente debido al redondeo del flotante. la única opción razonable es la desafortunada .gm-style-iw {overflow: hidden! important;}. por supuesto, esto se vuelve inútil una vez que realmente tienes que desplazarte

user151496

La fuente Roboto no parece desencadenar este problema a veces , pero sucede también con Arial y fuentes predeterminadas. Si observa este violín con su solución sugerida en Chrome 38 en Windows, todavía tiene una barra de desplazamiento desagradable: jsfiddle.net/simoneast/dckxp62o/2

Simon East

Answer 46

esta solución funciona para mí. También ocultar el desplazamiento funciona: .gm-style-iw {overflow: hidden! Important;} pero esto ocultará parte del contenido en infoWindow

Imaginary

Answer 47

+1 ¡sí! Pero combiné esta respuesta con la de user2656824 .

Sparky

Answer 48

+1 porque es la única respuesta que parece reconocer finalmente el hecho de que esto se debe a los problemas de fuentes de Roboto. No me sorprendería que otras fuentes también se procesen incorrectamente. el problema es que .gm-style-iw calcula una altura un poquito menor de la necesaria, probablemente debido al redondeo del flotante. la única opción razonable es la desafortunada .gm-style-iw {overflow: hidden! important;}. por supuesto, esto se vuelve inútil una vez que realmente tienes que desplazarte

user151496

Answer 49

La fuente Roboto no parece desencadenar este problema a veces , pero sucede también con Arial y fuentes predeterminadas. Si observa este violín con su solución sugerida en Chrome 38 en Windows, todavía tiene una barra de desplazamiento desagradable: jsfiddle.net/simoneast/dckxp62o/2

Simon East

Answer 50

Es bastante divertido, mientras que el siguiente código corregirá la barra de desplazamiento ANCHO:

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

}

Se necesitó esto para corregir la barra de desplazamiento ALTURA:

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

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

Answer 51

Creo que mi problema fue causado por un envoltorio de etiqueta h4. Cuando agregué su sugerencia, eliminó las barras de desplazamiento, pero había un poco fuera de la parte inferior de la ventana. Cuando agregué espacios en blanco: nowrap; al h4 todo mejoró. ¡Gracias!

Nate Bunney

Answer 52

Esto funciona para mi. Pon un diven elsetContent

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

Luego 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, consulte 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 53

29

gracias, no fue hasta que configuré mi fuente en comic-sans que esto comenzó a funcionar.

Bret

Answer 54

4

Esto resolvió mi problema por completo:

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

Vfleitao
fuente

Esta es la respuesta más cercana que funcionó para mí. En lugar de la altura automática, agregué una altura mínima.

Paul

Answer 55

Esta es la respuesta más cercana que funcionó para mí. En lugar de la altura automática, agregué una altura mínima.

Paul

Answer 56

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 arreglar 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 desaparecieron para siempre.

Answer 57

A veces ayuda, pero no soluciona el problema de manera confiable. Si ve este violín en Chrome 38 en Windows, todavía tiene una barra de desplazamiento fea: jsfiddle.net/simoneast/dckxp62o/3

Simon East

Answer 58

2

También es importante la altura del contenedor del mapa. Si es pequeña, la ventana de información siempre tendrá una altura de 80 píxeles. De lo contrario, maxWidthy #innerDivarreglar funciona a las mil maravillas.

xsi1
fuente

Exactamente, no creo que tenga un tamaño fijo, pero el punto es que si el mapa no es lo suficientemente grande (altura en este caso), la ventana de información no cambiará de tamaño para ajustar nuestro contenido. Trate de hacer el mapa más grande y puedes volver a intentarlo

spuas

ESTA es la respuesta más correcta aquí. Un mapa demasiado pequeño suele ser la causa de los problemas de tamaño de la ventana de información. Si desea probar la teoría, simplemente inspeccione el contenedor del mapa y aumente el ancho y la altura.

pim

Desafortunadamente, todavía hay problemas incluso con un mapa suficientemente grande.

Simon East

Answer 59

Exactamente, no creo que tenga un tamaño fijo, pero el punto es que si el mapa no es lo suficientemente grande (altura en este caso), la ventana de información no cambiará de tamaño para ajustar nuestro contenido. Trate de hacer el mapa más grande y puedes volver a intentarlo

spuas

Answer 60

ESTA es la respuesta más correcta aquí. Un mapa demasiado pequeño suele ser la causa de los problemas de tamaño de la ventana de información. Si desea probar la teoría, simplemente inspeccione el contenedor del mapa y aumente el ancho y la altura.

pim

Answer 61

Desafortunadamente, todavía hay problemas incluso con un mapa suficientemente grande.

Simon East

Answer 62

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

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

Answer 63

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 active 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é hacer un setTimeout (/ * show infowin callback * /, 100), pero a veces eso no funcionaba si el contenido (es decir, las imágenes) tardaba demasiado en cargarse.

Espero que esto funcione para usted.

Answer 64

0

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

<div>Apliqué una clase a una 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.

Taylor Dewey
fuente

Desafortunadamente, esta no es una solución confiable. Se sabe que el problema ocurre con Arial y otras fuentes estándar también.

Simon East

Answer 65

Desafortunadamente, esta no es una solución confiable. Se sabe que el problema ocurre con Arial y otras fuentes estándar también.

Simon East

Answer 66

0

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

Andrew Samuelsen
fuente

Answer 67

0

Agregue min-heighta su elemento de clase infoWindow.

Eso resolverá el problema si sus infoWindows 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','');

Jason
fuente

Estás en el camino correcto. La altura mínima de infoWindow no le ayudará, ya que ese DIV está contenido dentro de nuestro DIV que se desborda. Por lo tanto, establecer una altura mínima hará que se desplace cada vez.

clockworked247

Mirando la estructura del DOM, en realidad es el ABUELO de la clase infoWindow el que necesita que se elimine el desbordamiento. Mi código se parece a: infoCallBack = function infoCallback (infowindow, marker) {return function () {/ * el código para mostrar la ventana va aquí, luego mi corrección de desbordamiento a continuación * / setTimeout (function () {$ ('. Infowindow') .parent (). parent (). css ('desbordamiento', '');}, 25); }} Lo que básicamente desencadena la reparación de la ventana de información después de 25 ms, tiempo suficiente para que se procese.

clockworked247

Answer 68

Estás en el camino correcto. La altura mínima de infoWindow no le ayudará, ya que ese DIV está contenido dentro de nuestro DIV que se desborda. Por lo tanto, establecer una altura mínima hará que se desplace cada vez.

clockworked247

Answer 69

Mirando la estructura del DOM, en realidad es el ABUELO de la clase infoWindow el que necesita que se elimine el desbordamiento. Mi código se parece a: infoCallBack = function infoCallback (infowindow, marker) {return function () {/ * el código para mostrar la ventana va aquí, luego mi corrección de desbordamiento a continuación * / setTimeout (function () {$ ('. Infowindow') .parent (). parent (). css ('desbordamiento', '');}, 25); }} Lo que básicamente desencadena la reparación de la ventana de información después de 25 ms, tiempo suficiente para que se procese.

clockworked247

Answer 70

No pude hacer que funcionara de ninguna manera, estaba incluyendo 3 divs en la caja. Los envolví en un div externo, con anchos y alturas todos configurados correctamente, y nada funcionó.

Al final, lo arreglé configurando el div como parte superior izquierda absoluta, y luego, antes del div, configuré dos imágenes, una de 300px de ancho y 1px de alto, una de 120px de alto y 1px de ancho, de un gif transparente.

¡Entonces escaló correctamente!

Es feo pero funciona.

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

Answer 71

Creo que este comportamiento se debe a algunos estilos CSS en un contenedor externo, tuve el mismo problema pero lo resolví usando un div interno y agregando algo de relleno, sé que es extraño pero resolvió el problema

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

Y a mi estilo.css

div#fix_height{
    padding: 5px;
}

Answer 72

Tenía un elemento en línea (una etiqueta a) directamente dentro del divcon style="overflow:auto"[...envuelto en una petiqueta 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 73

Mi respuesta es agregar un oyente (usando addListenerOnce) para verificar si la infoWindow se ha agregado al DOM, luego abrir la infoWindow nuevamente (no es necesario 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 74

0

Agregar lo siguiente a mi CSS funcionó para mí:

white-space: nowrap;

ruggershawn
fuente

Eso eliminará el envoltorio en las líneas largas. No creo que sea una solución adecuada para muchas personas.

Simon East

Answer 75

Eso eliminará el envoltorio en las líneas largas. No creo que sea una solución adecuada para muchas personas.

Simon East

Answer 76

Solo para resumir todas las soluciones que me funcionaron 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 ancho mínimo por el valor que estableció en la ventana de información maxWidth)

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

Answer 77

Esto establece un ancho fijo para la ventana de información (ya no fluida), que es una solución, pero no ideal.

Simon East

Answer 78

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

Algunos detalles:

Estoy usando la API de Google Maps 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 resultó en desbordamientos de div, que activaron barras de desplazamiento.

Tuve que hacer tres cosas:

Eliminar todas las reglas de estilo display: inline-block de cualquier cosa dentro del contenido de la ventana de información (reemplacé con display: block) - Tuve la idea de probar esto desde un hilo (que ya no puedo encontrar) donde alguien estaba teniendo lo mismo problema con IE6.
Pase el contenido como un nodo DOM en lugar de como una cadena. Estoy usando jQuery, por lo 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 formas de obtener el mismo resultado.
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, configúrelo en un número muy grande.

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

Answer 79

No era aceptable para mí codificar de forma rígida el ancho y el alto de la ventana de información, o configurarlo white-space: nowrap, la maxWidthsolución no me ayudó y todo lo demás no funcionó o fue inapropiado para mi caso de uso.

Mi solución fue configurar el contenido, abrir la ventana y luego, cuando se activa el domreadyevento, configurar la heightpropiedad CSS en el contenido a la altura que sea, y luego forzar a Google Maps a cambiar el tamaño de la ventana de información en consecuencia.

infoWindowes el objeto InfoWindow, $infoWindowContentses un objeto Jquery del contenido que quiero poner allí, mapes mi objeto Map. markeres un marcador en el que se hizo clic.

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);

(Publiqué la misma solución en una pregunta similar ¿ Cómo consigo que una InfoWindow de google-maps cambie de tamaño para adaptarse al contenido que se coloca dentro de ella? )

Answer 80

0

Después de perder tiempo y leer por un tiempo, solo quería algo simple, este CSS funcionó para mis requisitos.

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

Además, no es una solución instantánea, pero destacar / comentar el problema podría hacer que lo solucionen, ya que creen que está solucionado: http://code.google.com/p/gmaps-api-issues/issues/detail?id= 5713

Dan
fuente

Esto corta el contenido en algunos casos. :-( En este violín en Chrome 38 en Windows, el "dddd" se corta por completo: jsfiddle.net/simoneast/dckxp62o/4

Simon East

Answer 81

Esto corta el contenido en algunos casos. :-( En este violín en Chrome 38 en Windows, el "dddd" se corta por completo: jsfiddle.net/simoneast/dckxp62o/4

Simon East

Answer 82

Bueno, este es el que me hizo el truco:

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

Sólo el establecimiento overflow: visibleen .gm-style-iwrealidad empeorado el problema! Noté en el inspector de herramientas para desarrolladores de Chrome que hay dos divs dentro del .gm-style-iwelemento, ambos overflow: autoconfigurados de forma predeterminada.

Estoy mostrando una gran cantidad de texto en formato HTML en mi InfoWindows, esa podría ser la razón por la que las otras soluciones no funcionaron en absoluto para mí.

API de Google Maps v3: InfoWindow no dimensiona correctamente

Respuestas: