CSS de Twitter, Google Maps e Internet Explorer

Para la clase de Planificación y Gestión de Proyectos (PGP) hemos tenido que desarrollar una página web de información de la Facultad de Informática de San Sebastián que contuviera como mínimo un lector rss de noticias, una encuesta y un mapa navegable indicando la Facultad. Además de estos objetivos, añadí que fuera bilingue (castellano y euskera).

Desde un primer momento tuve claro qué herramientas utilizar:

  • Las css Bootstrap de Twitter que me permitiría crear la estructura del portal rápidamente.
  • JQuery junto con distintos plugins para poder obtener las noticias vía rss y añadir un mapa de Google Maps.
  • PHP encapsulando la parte de los idiomas.

A priori, era una tarea sencilla, al fin y al cabo sólo era crear una página web. No había nada del otro mundo para llegar a blasfemar y maldecir. Pero heme aquí que últimamente me topo con cosas extrañas en las css de Twitter. Y, es que parece que sólo encuentro fallos en estas hojas de estilo, junto con sus bibliotecas de Javascript. Si hace tiempo tuve problemas con los botones en Internet Explorer (en IE los botones eran tan anchos como los input) teniendo que modificar  las css. Esta vez me he topado con problemas a la hora de utilizar el plugin de JQuery  GMap, y no porque no funcione, porque lo hace correctamente, por lo menos, cuando la página web sólo contiene el mapa. El problema comienza cuando coloco el mapa (etiqueta div) en el interior de la estructura definida con Bootstrap. Es justo en ese momento cuando el mapa no se visualiza correctamente, faltan trozos por rellenar, etc.

Es entonces cuando decidí que tenía que pasar del plugin GMap y buscar otra solución. Y la encontré, así por las buenas. Resulta que Google Maps te permite obtener el código necesario para embeber un mapa en tu página web. Así que, busco la facultad, la centro, cojo el código y lo pego en el lugar adecuado de la página. La cargo con Chrome, perfecto, la cargo con Firefox, perfecto, la cargo con Internet Explorer… ¡tengo un rectángulo blanco!. Pero, ¿qué es esto?. ¿Internet Explorer 8 me está tomando el pelo?.

Tras patearme internet un buen rato y, cuando digo un buen rato, me refiero a UN BUEN RATO, conseguí la solución. Consiste en utilizar la etiqueta object en vez de iframe, para la declaración del contenedor del mapa de Google. Con Chrome y Firefox funciona correctamente, ahora, Internet Explorer sigue teniendo problemas, no carga. Pues bien, para  lograr que funcione tenemos que añadir el siguiente código Javascript que ha de ejecutarse únicamente cuando el navegador sea Internet Explorer, de ahí que tengamos la condición inicial [if lte IE 8]:

<!--[if lte IE 8]>
<script type="text/javascript">
	(function cargar()
	{
		var o=document.getElementById('map');
		var i=document.createElement('iframe');
		i.setAttribute('src',o.getAttribute('data'));
		i.style.width  =o.style.width;
		i.style.height=o.style.height;
		o.parentNode.replaceChild(i,o);
	})();
	</script>
<![endif]-->

Pero aún tenía más problemas, porque al usar las pestañas de Bootstrap y tener el mapa en una pestaña secundaria, sólo se mostraba el mapa de Google cuando al estar cargando la página accedía al contenido de la pestaña donde se encontraba el problemático mapa, Localización. La solución ha sido de idea feliz, “voy a establecer un identificador a la pestaña y asociarle un evento desde JQuery, de manera que, cuando se pinche en él se llame a una función Javascript que ejecute el código que he puesto antes si se trata de un navegador Internet Explorer.

Dicho y hecho. Ahora el mapa de Google funciona correctamente.

Estas es la declaración de las pestañas para que Bootstrap las manipule. Se puede ver el identificador localización en el tercer elemento de la lista:

Y, esta es la asociación del evento click a la pestaña que, además, no interfiere en el funcionamiento del Javascript de Bootstrap:

<script type="text/javascript">// <![CDATA[
$().ready(function() { 		$('.idioma').click(function() { 			var idioma = $(this).attr('id'); 			window.location = "index.php?idioma=" + idioma; 		}); 		if (navigator.appName.indexOf("Explorer") != -1) { 			$('#localizacion').click(function() { 				cargar(); 			}); 		} 	});
// ]]>
</script>

Aquí podéis ver la página web de la que estaba hablando: http://pgp.krispytech.com/practica1/

En la pestaña Tecnología se encuentra el código fuente empaquetado en un rar.

 

Edito: 03/02/2012
Me olvidaba poner dónde encontré la solución: http://blog.poplabs.com/2009/08/embedding-google-maps-iframe-to-object-with-xhtml-strict/

Deja un comentario