Fallo en la carga de mapa con funcion toogle de jquery
Tengo metido un iframe con los datos de google maps y se ejecuta bien pero al añadirle la funcion hide() y despues toogle() en un enlace para visualizarlo aparece pero no carga las coordenadas como antes.
¿Qué puedo hacer?
2 Respuestas
Existe un problema al aplicar un toggle con jquery a los mapas de Google Maps. En un proyecto en el que tuve que resolver ese mismo problema optamos por crear una función que se ejecutara en paralelo al toggle.
function refreshmap() {
setTimeout(function() {initialize_IDENTIFICADOR_DEL_CONTENEDOR_DEL_MAPA();}, 50)
}
¿Pero cómo aplico esta función?
Bien en tu fichero .js donde estés lanzando las funciones jquery o bien en el propio código, debes añadir primero el código de la función, y luego justo después de efectuar el toggle() que mencionas, ubicar la llamada a la función.
function refreshmap() { ... }
/* Selector jquery */
...
toggle();
refreshmap();
...(Recuerda cambiar el nombe "IDENTIFICADOR_DEL_CONTENEDOR_DEL_MAPA" en la función refreshmap() por el ID del contenedor que contiene al control de Google Maps)
<div id="wrapperMapa" >
<iframe id="mapa" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3062.56464068407!2d-4.0043763!3d39.861588499999996!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd6a0bc8a2b3d7b7%3A0x6fc802c094563c1b!2sPaseo+de+la+Rosa%2C+142%2C+45006+Toledo%2C+Espa%C3%B1a!5e0!3m2!1ses!2s!4v1407005932300" width="100%" height="400" frameborder="0" style="border:0"></iframe>
</div >
//--------------------------------------
$('#mapa').css('display','none');
$('#direccionMapa').click( function () {
$('#mapa').toggle();
});
Prueba a hacerlo con un css embebido, esto es:
<div id="wrapperMapa" > <iframe id="mapa" style="display:none"src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3062.56464068407!2d-4.0043763!3d39.861588499999996!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd6a0bc8a2b3d7b7%3A0x6fc802c094563c1b!2sPaseo+de+la+Rosa%2C+142%2C+45006+Toledo%2C+Espa%C3%B1a!5e0!3m2!1ses!2s!4v1407005932300" width="100%" height="400" frameborder="0" style="border:0"></iframe> </div >
En vez de ponerlo mediante jquery.
Luego prueba de nuevo.
¿El DOM #direccionMapa que es?