Visualización del mapa de Google desde un área oculta

Question

Realmente espero que alguien pueda aconsejarle que muestre un mapa de Google desde un div oculto.

Tengo un mapa de google que quiero mostrar a un usuario si hace clic en un enlace, es decir, Mostrar mapa.

Poner el mapa en un div oculto simplemente no funciona para nada, así que oculté el mapa -1000px en una posición absoluta css value.

Esto me ha dado resultados mucho mejores, pero cuando uso css para volver a mostrar el mapa, solo se muestra.

http://screencast.com/t/MTMyOGZmNW

Puede alguien dar asesorarme sobre la mejor manera de tener un mapa oculto se hace visible después de que peform un espectáculo?

Espero que alguien pueda aconsejar.

Gracias

Answer 1

Usted no necesita molestarse con la posición absoluta y todo eso. Que el div se podrá ver hasta que sea necesario, a continuación, mostrar y llamar google.maps.event.trigger(map, 'resize') (v3) o map.checkResize() (v2)

escenario adicional mencionado en los comentarios:

Asegúrate de que llamar google.maps.event.trigger(map, 'resize') ANTES de llamar map.fitBounds() o se obtendrá resultados inesperados .

Answer 2

¿Usted ha intentado llamar al evento de cambio de tamaño del mapa?

Google Maps API - Map

Answer 3

¿Por qué no postergar la representación del mapa hasta que se muestre div?

código áspera:

$("button").click(function() { 
    $(mapDiv).show(); 
    new google.maps.Map(mapDiv, opts); 
});