Google map + jQuery: error de representación

Al colocar un mapa de Google dentro de una pestaña jquery-ui, el mapa no se muestra correctamente en determinadas circunstancias. Para reproducir:Google map + jQuery: error de representación

Ir here
clic en el enlace 'lista'
Cambiar el tamaño de la ventana del navegador
Haga clic en el 'mapa' de enlace

Observe que algunas de las superposiciones de nombres de lugares dibujar correctamente, pero otros no. De hecho, he eliminado todas las cosas de jquery-ui para limitar el alcance del problema, y parece ser solo la aplicación de la pantalla: ocultar/mostrar: bloque que causa el problema.

ACTUALIZACIÓN

El error se produce también, de vez en cuando, justo cuando cambia entre display: none/bloquear - por ejemplo, no se cambia el tamaño. Esto parece ser más común en IE (8).

Fuente

2009-07-19 Bobby Jack

¿Esto es para Google Maps API v2 o v3? He estado trabajando con v3 y he tenido problemas similares, pero todavía no he podido resolverlos al 100%. –

He resuelto ese problema echemos un vistazo en http://stackoverflow.com/a/13380866/1823525 –

probar esto:

if (window.attachEvent) { 
    window.attachEvent("onresize", function() {this.map.onResize()}); 
    } else { 
    window.addEventListener("resize", function() {this.map.onResize()} , false); 
    }

después

map_initialize();

porque hay que decirle al mapa que se cambia el tamaño de la página, tal vez ese es el problema que no tiene un jQuery uno

EDITAR

Ok quitar el

if (window.attachEvent) { 
      window.attachEvent("onresize", function() {map.onResize()}); 
     } else { 
      window.addEventListener("resize", function() {map.onResize()} , false); 
     }

y reemplazar su

$('#map').show();

con:

$("#map").show(1, function() { 
      resizeMap(); 
     });

resizeMap() llamará Google Maps' checkResize() en el mapa en particular.

fuente: http://jqueryui.com/demos/tabs/#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F

Fuente

2009-07-19 17:07:53

Suena bien en teoría, pero no funciona para mí en la práctica :((ejemplo actualizado) –

su ejemplo actualizado no Ya tengo el problema para mí, Estoy usando Firefox 3.5. ¿Qué estás usando? –

Firefox 3.5.1 Lo intentaré en un par de navegadores más; me pregunto si tengo algunos problemas de almacenamiento en caché. Lo haré. publique un par de capturas de pantalla si el problema persiste, solo para confirmar cuál es. Saludos. –

intente llamar map.onResize() después de visualizar el mapa cada vez.

Puede que no funcione bien si se llama cuando el mapa está oculto mediante la pantalla: ninguno, ya que tendría cero altura y ancho.

Fuente

2009-07-19 19:21:02

Sí, la pantalla: ninguno es definitivamente el problema. –

Desde el online docs:

utilizar la técnica fuera de la izquierda para ocultar paneles de pestañas inactivas. P.ej. en su hoja de estilo , reemplace la regla del selector de clase ".ui-tabs.. ui-tabs-ocultar" con
.ui-tabs .ui-tabs-hide { 
    position: absolute; 
    left: -10000px; 
} 

Fuente

2009-07-19 21:16:42

Utilizando el jQuery Google Maps plugin se estaba teniendo el mismo problema con pestañas jQuery UI

El mapa se crea de esta manera:

$("#google-map").googlemap({ 
    controls: false, 
    labels: true, 
    zoom: 9, 
    latitude: 51.5, 
    longitude: 0, 
    debug: false 
});

Fue resuelto muy fácilmente (pero no rápidamente) llamando al

$("#google-map").googlemap().getMap().checkResize();

Después de que se muestre el mapa div. He probado esto en FF y Safari, además

resizeTo(screen.width, screen.height);

Funciona en FF pero no en IE o Safari.

Fuente

2009-08-19 11:58:14 rjstelling

Google map + jQuery: error de representación

Respuesta

Cuestiones relacionadas