gmaps4rails muestra solo la mitad del mapa cuando la pestaña iside. ¿Alguna idea de por qué?

He estado buscando pero no he encontrado un problema como este.gmaps4rails muestra solo la mitad del mapa cuando la pestaña iside. ¿Alguna idea de por qué?

¡Gmaps4rails funciona muy bien para mí!

El problema se produce cuando se inserta en una pestaña JQuery. Carga la mitad del mapa. En realidad, parece que le faltan imágenes. Puedo mover/cambiar el tamaño como de costumbre. Pero solo muestra una parte del mapa. Y la parte faltante suele ser la parte izquierda/inferior. Pero el tamaño de la parte vacía varía todo el tiempo.

Al mismo tiempo, la mano que muestra el cursor del mouse al pasar el mapa se convierte en flecha al pasar esta parte vacía (pero esta parte aún está dentro del contenedor de Google).

Si coloco el contenedor gmaps fuera de las pestañas JQuery, funciona perfectamente. ¿Alguien ha visto esto antes?

vista

#tabs-4 
    #gmap 
     =gmaps("map_options" => { "detect_location" => true, "auto_zoom" => false, "center_on_user" => true, "zoom" => 17},"markers" => { "data" => @json })

Muchas gracias!

Fuente

2012-04-19 Sergio Nekora

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

Pero tamaño se llama de forma diferente en V3

Intente llamar al google.maps.event.trigger(map, 'resize')

EDITAR

Todos los métodos que encontré se refieren a un cambio en JavaScript. Otra forma en que se encontró http://snipplr.com/view/57003/

$('#tabs').tabs({ 
    show: function (event, ui) { 
     google.maps.event.trigger(map, 'resize'); 
    } 
});

Fuente

2012-04-19 13:43:50

Bueno, soy bastante nuevo en todo esto y no estoy seguro de cómo se supone que debo hacer esto. He intentado con ese método JS, reemplazando con los nombres de las pestañas. Pero no funciona. Creo que adelgazo, lo estoy haciendo mal. –

Noté que actualizaste tu pregunta, pero sé que Ruby cero :(Prueba lo que muestro en mi respuesta actualizada –

Bueno, es posible que no conozcas a Ruby pero lo hiciste funcionar. Lo puse en la función que llaman a las pestañas que funcionan ! Muchas gracias! –

Es un problema común. Debe asegurarse de que la API conoce el tamaño del mapa (actualmente cree que tiene un tamaño cero).

Dispare el evento de cambio de tamaño cuando el mapa se hace visible. A partir de los documentos:

desarrolladores deben activar este evento en el mapa cuando el div cambia de tamaño: google.maps.event.trigger(map, 'resize')

Fuente

2012-04-19 13:42:05

Como dije antes ... Me temo que no sé dónde implementar eso. ¿Debería ir al método Tab? –

Publica un enlace y es posible que podamos ver.Necesita ir en lo que realmente muestra el mapa (probablemente el código jQuery). –

Muchas gracias. Ahora está arreglado. –

Aunque esta pregunta es un año de edad, que describe exactamente lo que estaba experimentando, pero la respuesta aceptada no funcionó para mí. Esto es lo que finalmente funcionó ...

$('#tabs').tabs({ 
    activate: function (event, ui) { 
    var center = Gmaps.map.map.getCenter(); 
    google.maps.event.trigger(map, 'resize'); 
    Gmaps.map.map.setCenter(center); 
    } 
});

Tal vez estoy usando nuevas versiones. Necesitaba usar activate: en lugar de show: y el mapa estaba fuera del centro una vez que se expandió para llenar el contenedor por lo que la necesidad del código de centrado. Espero que esto le ahorre a alguien algo de tiempo!

Fuente

2013-03-25 23:27:28 SteveO7

Siempre es bueno tener una nueva entrada. Lo intentaré y publicaré los resultados. –

Una nota más; la versión 2.x de gmaps4rails reemplaza la sintaxis Gmaps.map.map.xxxx a favor de Gmaps.map.getMapObject(). xxxx Consulte los documentos aquí https://github.com/apneadiving/Google-Maps-for-Rails/wiki/Javascript-goodies – SteveO7

Ok solo una pequeña modificación en las cosas publicadas anteriormente. Si usa la respuesta seleccionada, puede obtener un error con el mapa no enfocado correctamente. Lo que @ SteveO7 dijo que funciona bien. También tuve que ajustarlo un poco para el arranque. Aquí está en CoffeeScript:

$('a[data-toggle="tab"]').on 'shown', (e) -> 
    if $(e.target).attr('href') == '#tab2' 
    center = Gmaps.map.map.getCenter() 
    google.maps.event.trigger map, "resize" 
    Gmaps.map.map.setCenter(center)

Fuente

2013-04-05 07:36:51

Creo que estoy teniendo el mismo problema de diseño con bootstrap, pero no puedo hacer que funcione tu código. ¿Es necesaria la declaración if? – SteveO7

Sí, quiere asegurarse de que está en la pestaña correcta. Pero debes ajustarlo para que coincida con la identificación de tu pestaña. Si no te importa ejecutar este código en cada botón de tabulación, entonces es mejor deshacerse de él. –

¡Dang, olvidé usar la sintaxis más nueva de mi propio comentario anterior! Gmaps.map.getMapObject en lugar de Gmaps.map.map. Gracias por la repetición rápida! Por cierto, ¿estás usando la versión 2.x todavía? – SteveO7

gmaps4rails muestra solo la mitad del mapa cuando la pestaña iside. ¿Alguna idea de por qué?

Respuesta

Cuestiones relacionadas