Incompatibilidad de JavaScript con GoogleMaps.

Maicro · #1 (**permalink**) 07/10/2009, 05:34

Hola buenas. Por delante anuncio que no tengo ni idea de JavaScript y me limito a copiar, modificando a mis necesidades, el código que la gente cuelga en los tutoriales. Por ello he llegado a este punto donde no sé cómo solucionarlo y, por favor, pido vuestra ayuda.

En la página que le estoy haciendo a un amigo sobre su negocio, en el apartado de Localización, he insertado un mapplets de Google mediante un iframe. Pero los comentarios de los expertos de por aquí desaconsejan el uso del iframe, entre otras razones por los problemas que presenta al validar.

Por ello estaba insertándolo en una simple capa. Sin embargo, los navegadores no me sacaban el mapa en la página. Eliminando código por partes encontré que la incompatibilidad está con el JavaScript que me saca la hora en pantalla. Os muestro el código.

Código:

<div id="hora">
	<span id="liveclock"></span>
	<script type="text/javascript" src="js/hora.js"></script>
</div>

Y el JavaScript de hora.js.

Código:

	function show5(){
		if (!document.layers&&!document.all&&!document.getElementById)
		return

		var Digital=new Date()
		var hours=Digital.getHours()
		var minutes=Digital.getMinutes()
		var seconds=Digital.getSeconds()

		var dn="PM"
		if (hours<12)
		dn="AM"
		if (hours>12)
		//Quitado para hacer 24H >hours=hours-12< //
		if (hours==0)
		hours=12

		if (minutes<=9)
		minutes="0"+minutes
		if (seconds<=9)
		seconds="0"+seconds
		myclock=""+hours+":"+minutes+":"+seconds+""	//Quitado > "+dn+"< para no poner AM/PM
		if (document.layers){
			document.layers.liveclock.document.write(myclock)
			document.layers.liveclock.document.close()
		}
		else if (document.all)
		liveclock.innerHTML=myclock
		else if (document.getElementById)
		document.getElementById("liveclock").innerHTML=myclock
		setTimeout("show5()",1000)
	}
window.onload=show5

El mapa lo muestro en la página con este código:

Código:

<div id="map"></div>

Con este estilo:

Código:

#map {
	float: right;
	margin: 10px 20px 10px 20px;
	width: 400px;
	height: 200px;
}

Por favor, ¿se os ocurre qué puedo cambiar para solucionar la incompatibilidad? ¿O es mejor que mantenga el mapa en un iframe con el error del validador?

Muchas gracias por vuestro tiempo. Saludos.

maycolalvarez · #2 (**permalink**) 07/10/2009, 06:27

¿que error exactamente te dá?

Maicro · #3 (**permalink**) 07/10/2009, 09:25

Gracias por tu atención. Si coinciden en la página el JavaScript que saca el reloj con la hora junto al JavaScript del mapplets de GoogleMaps, el mapa no se visualiza. Deja el espacio que determino para la capa en el estilo pero no puede dibujar el mapa. Si elimino el JavaScript del reloj, sí dibuja el mapa.

deirdre · #4 (**permalink**) 07/10/2009, 09:32

Hola Maicro

Has intentado insertar el iframe como objeto?. De esa forma tienes el iframe y además valida sin problemas.

Bye

Maicro · #5 (**permalink**) 07/10/2009, 09:47

Pues no ;) A falta de alguna alternativa con el JavaScript, supongo que tendré que hacerlo así. Gracias ;)

Maicro · #6 (**permalink**) 08/10/2009, 02:39

Cita:

Iniciado por deirdre

Hola Maicro

Has intentado insertar el iframe como objeto?. De esa forma tienes el iframe y además valida sin problemas.

Bye

Deirdre, como siempre, mil gracias. Con tu solución, problema resuelto. a tu salud ;)

Maicro · #7 (**permalink**) 08/10/2009, 08:00

Pues ahora no me va. Me da un problema de ejecución. En fin, que tendrá que quedarse como iframe :( Gracias.

deirdre · #8 (**permalink**) 08/10/2009, 08:21

Hola Maicro

Si pones tu código quizás encontremos una solución. Yo tengo montado un iframe como objeto con coordenadas de google-maps y funciona perfectamente. Si lo cargas en iframe no tiene porqué cruzar incompatibilidad con otro javascript...

Bye

deirdre · #9 (**permalink**) 08/10/2009, 08:33

Hola de nuevo...

Acaba de montar tu script de fecha en la página que tengo con el iframe como objeto con coordenadas de google-maps y funciona perfectamente. No producen ninguna incompatibilidad. Probado en ie7, ff3 y opera10.

Bye

Maicro · #10 (**permalink**) 08/10/2009, 09:32

Hola. Ahora me pillas en el trabajo y no puedo mostrar nada de lo que tengo en casa. Pero mirad.

http://www.maicro.es/classicco/local...alizacion.html Está como objeto y unificando estilos en un único archivo. En Chrome funciona bien, pero en IE da fallos:

·Muestra las barras de desplazamiento en el objeto.
·Da error de script en la pagina que contiene el mapa -llamada mediante el objeto-, en la linea 26, carácter 6, error: 'infoTabs' no está definido, código: 0. La página que da el fallo (http://www.maicro.es/classicco/localizacion/ccgm.html), si se carga directamente en una ventana de IE, sale sin problemas.

De todas formas, me he encontrado al final con otro problema con las transparencias en el IE6 de casa que me ha desesperado y al final, harto, lo he dejado para empezar de cero. ¡Qué desesperación! :D

Gracias de todas formas.

Maicro · #11 (**permalink**) 08/10/2009, 14:41

¡Ey! Este finde lo voy a tener muy liado. Sábado almuerzo en la sierra. Domingo mercado medieval de Alcalá de Henares y el lunes creo que tengo que ir a La Bañeza. Así es que a lo mejor hasta el miércoles no doy señales de vida. Si alguien me responde en ese tiempo, gracias por la atención y disculpas por mi silencio. Saludos.

deirdre · #12 (**permalink**) 08/10/2009, 16:51

Hola Maicro

El archivo ccgm.html cargado de forma individual también marca error de javascript (aunque no salte el aviso en pantalla en iexplorer, puedes verlo en el aviso-señal amarillo abajo a la izquierda en el navegador).

Este es el mismo error ('infoTabs' no está definido) que salta cuando esta página la cargas a través de localizacion.html

Tendrías que estudiar en el javascript que estás usando porque no está definido 'infoTabs'.



Otra cuestión: Tienes algún motivo especial para cargar el mapa desde una segunda página (ccgm.html) en vez de cargar el object-iframe directamente en localizacion.html?... Porqué utilizas ese javascript?

Si necesitas ayuda para mostrarlo directamente, ya sabes... avisa.

Bye

Maicro · #13 (**permalink**) 12/10/2009, 03:19

Buenas. Disculpas por mi silencia.

Muchas gracias, y van mil una, Deirdre por tu ayuda.

En efecto, había metido la pata con el código para la página del mapa. Ya lo he corregido. ccgm.html que así:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> 
	<title>Classic Co. en GoogleMaps</title>
	<meta name="generator" content="Notepad++" />
	<meta content="text/html; charset=ISO-8859-15" http-equiv="content-type" />
	<meta name="description" content="Mapa de localizaci&oacute;n De Classic Co. en GoogleMaps" />
	<meta name="keywords" content="moto, guzzi, motoguzzi, ducati, benelli, laverda, morini, clasica, classic, bikes, italiana, repuesto, competicion, accesorio, dellorto, dell'orto, delldell&acute;orto, orto, carburador, grimeca, tambor, tarozzi, tommaselli, fontana, ceriani, localizaci&oacute;n, mapa" />
	<meta name="author" content="Enrique Fraile Torrecilla Maicro" />
	<link rev="made" href="mailto:[email protected]" />
	<meta name="DC.Subject" content="Taller de motocicletas cl&aacute;sicas y modernas" />
	<meta name="DC.Description" content="Taller de reparaci&oacute;n y acondicionamiento de motocicletas, cl&aacute;sicas y modernas. Ya sean para su circulaci&oacute;n en vías p&uacute;blicas como para preparaciones para circuito." />
	<meta name="DC.Publisher" content="classicco.biz" />
	<meta name="DC.Publisher" content="classicco.es" />
	<link rel="shortcut icon" href="favicon.ico" />
	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAWm_MkkJmx1_E_PFZ7xCvUxTlN--jU_xwhwjP_P9jrOnxiLN5fRTht3QoTTLZTIRl6JkTcjWGRK2g2A" type="text/javascript"></script> 
	<script type="text/javascript">
		//<![CDATA[
		//funcion para cargar un mapa de Google. 
		//esta funcion se llama cuando la pagina se ha terminado de cargar. Evento onload
			function load() {
				//comprobamos si el navegador es compatible con los mapas de google
				if (GBrowserIsCompatible()) {
					//instanciamos un mapa con GMap, pasandole una referencia a la capa o <div> donde queremos mostrar el mapa
					var map = new GMap2(document.getElementById("map"));   
					//centramos el mapa en una latitud y longitud deseadas. setCenter() se tiene que invocar justo después de instanciar el mapa!!! 
					map.setCenter(new GLatLng(40.307938, -3.46653), 13);   
					//añadimos controles al mapa, para interaccion con el usuario, zoom Small
					map.addControl(new GSmallMapControl());
					//añadimos los tipos de mapa
					map.addControl(new GMapTypeControl());
					// SI QUEREMOS PLANO DE ZONA -> map.addControl(new GOverviewMapControl()); ;
					// Punto de Classic Co. -> AL LORO GPoint con coordenadas invertidas 
					var point = new GPoint (-3.460215, 40.304456);
					var marker = new GMarker(point);
					map.addOverlay(marker);
				}
			}
		//]]>
	</script>
	<style type="text/css">
		body {
		background: #000000;
		font-family: Verdana, Arial, Helvetica, Helv, sans-serif;
		margin: 0;
		padding: 0;
		}
	</style>
</head> 
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 400px; height: 220px; margin: 0; padding: 0;"></div>
</body> 
</html>

Y funciona ya sin error,... creo

He probado a cargar dicha página como iframe, como objeto y directamente en la página. Sólo como objeto entra en un bucle de fallo de ejecución. Directamente en la página no lo muestra. Directamente desactivando la capa hora saca los controles del mapa pero no el mapa. En el siguiente mensaje inserto el código, pero me parece un comida de cabeza demasiado molestas. ¿No sería mejor cambiar el encabezado para validar el iframe y dejarme de problemas? ¿Ten recomendable es evitar el uso del iframe?

Muchas gracias.

Maicro · #14 (**permalink**) 12/10/2009, 03:20

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head >
	<title>C&oacute;mo llegar a Classic Co. en Arganda del Rey, Madrid</title>
	<meta name="generator" content="Notepad++" />
	<meta content="text/html; charset=ISO-8859-15" http-equiv="content-type" />
	<meta name="description" content="Mapa de localizaci&oacute;n e instrucciones de c&oacute;mo ir en  transporte p&uacute;blico o privado a la tienda de Classic Co. situada en Arganda del  Rey, Madrid." />
	<meta name="keywords" content="moto, guzzi, motoguzzi, ducati, benelli, laverda, morini, clasica, classic, bikes, italiana, repuesto, competicion, accesorio, dellorto, dell'orto, delldell&acute;orto, orto, carburador, grimeca, tambor, tarozzi, tommaselli, fontana, ceriani, localizaci&oacute;n, direcci&oacute;n, ir, llegar, transporte, coche, autob&uacute;s, metro," />
	<meta name="author" content="Enrique Fraile Torrecilla Maicro" />
	<link rev="made" href="mailto:[email protected]" />
	<meta name="DC.Subject" content="Taller de motocicletas cl&aacute;sicas y modernas" />
	<meta name="DC.Description" content="Taller de reparaci&oacute;n y acondicionamiento de motocicletas, cl&aacute;sicas y modernas. Ya sean para su circulaci&oacute;n en vías p&uacute;blicas como para preparaciones para circuito." />
	<meta name="DC.Publisher" content="classicco.biz" />
	<meta name="DC.Publisher" content="classicco.es" />
	<link rel="stylesheet" href="estilo.css" media="screen" type="text/css" title="Hoja de estilo de Classic Co." />
	<link rel="shortcut icon" href="favicon.ico" />
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="js/menu.js"></script>
	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAWm_MkkJmx1_E_PFZ7xCvUxTlN--jU_xwhwjP_P9jrOnxiLN5fRTht3QoTTLZTIRl6JkTcjWGRK2g2A" type="text/javascript"></script> 
	<script type="text/javascript">
		//<![CDATA[
		//funcion para cargar un mapa de Google. 
		//esta funcion se llama cuando la pagina se ha terminado de cargar. Evento onload
			function load() {
				//comprobamos si el navegador es compatible con los mapas de google
				if (GBrowserIsCompatible()) {
					//instanciamos un mapa con GMap, pasandole una referencia a la capa o <div> donde queremos mostrar el mapa
					var map = new GMap2(document.getElementById("map"));   
					//centramos el mapa en una latitud y longitud deseadas. setCenter() se tiene que invocar justo después de instanciar el mapa!!! 
					map.setCenter(new GLatLng(40.307938, -3.46653), 13);   
					//añadimos controles al mapa, para interaccion con el usuario, zoom Small
					map.addControl(new GSmallMapControl());
					//añadimos los tipos de mapa
					map.addControl(new GMapTypeControl());
					// SI QUEREMOS PLANO DE ZONA -> map.addControl(new GOverviewMapControl()); ;
					// Punto de Classic Co. -> AL LORO GPoint con coordenadas invertidas 
					var point = new GPoint (-3.460215, 40.304456);
					var marker = new GMarker(point);
					map.addOverlay(marker);
				}
			}
		//]]>
	</script>
</head>
<body onload="load()" onunload="GUnload()">
	<div id="cuerpo">
		<div id="contenido">
			<div id="encabezado">
				<img src="../img/altiz.jpg" width ="300 px" height ="75 px" alt="Las motos de Classic Co. en acci&oacute;n" />
				<a href="http://www.classicco.es/" title="Inicio de Classic Co."><img src="../img/logoclassicco.jpg" width ="300 px" height ="75 px" alt="Logotipo de Classic Co." /></a>
				<img src="../img/altde.jpg" width ="300 px" height ="75 px" alt="Las motos de Classic Co. en acci&oacute;n" />
			</div>
			<div class="barramenu">
				<ul id="menu">
					<li><a href="#" title="El lado humano de Classic Co.">CLASSIC CO.</a>
						<ul class="submenu">
							<li><a href="#" title="La evoluci&oacute;n de Classic Co.">Nuestra historia</a></li>
							<li><a href="#" title="Nuestra tienda y taller">Qu&eacute; ofrecemos</a></li>
							<li><a href="#" title="C&oacute;mo encontrarnos">Localizaci&oacute;n</a></li>
							<li><a href="#" title="Para que no nos encuentres cerrado">Horarios de apertura</a></li>
							<li><a href="#" title="&iquest;Alguna duda? Escr&iacute;benos">Contacto</a></li>
						</ul>
					</li>
					<li><a href="#" title="Actualidad en Classic Co.">NOTICIAS</a>
						<ul class="submenu">
							<li><a href="#" title="Las primicias en Classic Co.">Novedades</a></li>
							<li><a href="#" title="Propuestas que te interesan">Ofertas</a></li>
							<li><a href="#" title="La colecci&oacute;n de Classic Co.">El museo</a></li>
							<li><a href="#" title="Actividades para compartir">Eventos</a></li>
							<li><a href="#" title="Classic Co. en los medios">En la prensa</a></li>
						</ul>
					</li>
					<li><a href="#" title="Accesorios y preparaciones">PROYECTOS</a>
						<ul class="submenu">
							<li><a href="#" title="Moto1">Moto1</a></li>
							<li><a href="#" title="Moto2">Moto2</a></li>
							<li><a href="#" title="Moto3">Moto3</a></li>
						</ul>
					</li>
					<li><a href="#" title="Las creaciones de Classic Co.">ESPECIAL</a>
						<ul class="submenu">
							<li><a href="#" title="La BellaRacer de Topete">El Jarama</a></li>
							<li><a href="#" title="El fruto de las grandes ideas y la pasi&oacute;n">Hypertwin HT01</a></li>
							<li><a href="#" title="&aacute;">Corsa Rosso</a></li>
							<li><a href="#" title="&aacute;">Corsa Verde</a></li>
							<li><a href="#" title="&aacute;">750 Bicolore</a></li>
							<li><a href="#" title="&aacute;">Jawa 500</a></li>
							<li><a href="#" title="&aacute;">Jawa 500 Bialbero</a></li>
							<li><a href="#" title="&aacute;">Ducati 450</a></li>
						</ul>
					</li>
					<li><a href="#" title="Venta de accesorios v&iacute;a electr&oacute;nica">TIENDA</a>
					</li>
					<li><a href="#" title="Documentos para bajarte">DESCARGAS</a>
						<ul class="submenu">
							<li><a href="#" title="Fondos de pantalla">Escritorio</a></li>
							<li><a href="#" title="Los manuales para las reparaciones de la moto">Libros de taller</a></li>
							<li><a href="#" title="Los manuales para las piezas de la moto">Libros de despiece</a></li>
							<li><a href="#" title="Consejos y trucos para nuestras m&aacute;quinas">Informaci&oacute;n &uacute;til</a></li>
						</ul>
					</li>
					<li><a href="#" title="Todo lo vinculado a Classic Co.">ENLACES</a>
						<ul class="submenu">
							<li><a href="#" title="Los compañeros de fatigas">Colaboradores</a></li>
							<li><a href="#" title="Con los que compartimos nuestra pasi&oacute;n">Nos gustan</a></li>
						</ul>
					</li>
				</ul>
			</div> <!-- barramenu -->
			<div id="barraestado">
				<!--
				<div id="hora">
					<span id="liveclock"></span>
					<script type="text/javascript" src="js/hora.js"></script>
				</div>
				-->
				<div id="dia">
					<script type="text/javascript" src="js/dia.js"></script>
				</div>
				<div id="localizacion">
					Ubicaci&oacute;n: <a href="../inicio/inicio.html" title="Presentaci&oacute;n de Classic Co.">Classic Co.</a> &gt; Localizaci&oacute;n
				</div>
			</div>  <!-- barraestado -->
			<div id="tema">
				<h1>Ven a visitarnos a Classic Co.</h1>
				<p><span class="classicco">Classic Co.</span> nos encontramos en el pol&iacute;gono industrial Rinc&oacute;n, en Arganda del Rey. A un par de kil&oacute;metros del <strong>Hospital del Sureste</strong>. Nuestra direcci&oacute;n es:</p>
				<iframe id="gmap" src="ccgm.html" width="400" height="220" scrolling="no" frameborder="0" marginwidth="0"; marginheight="0"; transparency>
					<p>Para localizar <span class="classicco">Classic Co.</span> en GoogleMaps pincha <a href="http://maps.google.com/maps?f=d&source=s_d&saddr=&daddr=40.304518,-3.460243&hl=es&geocode=&mra=mi&mrsp=0&sz=16&sll=40.304399,-3.460205&sspn=0.012895,0.01929&ie=UTF8&z=16" title="Classic Co. en GoogleMaps" target="blank">aqu&iacute;</a>.</p>
				</iframe>
				<ul class="datos">
					<li><span class="classicco">Classic Co.</span></li>
					<li>C/ Rinc&oacute;n, 9</li>
					<li>Pol&iacute;gono Industrial Rinc&oacute;n</li>
					<li>28500 Arganda del Rey (Madrid)</li>
					<li>Espa&ntilde;a</li>
				</ul>
				<!--
				<p>Carga del mapa como objeto:</p>
				<object type="text/html" data="ccgm.html" style="width: 400px; height:220px;" >ERROR (no puede mostrarse el objeto)</object>
				-->
				<p>Carga del mapa en la página directamente con el código como est&aacute; en <em>ccgm.html</em>:</p>
				<div id="map" style="width: 400px; height: 220px; margin: 0; padding: 0;"></div>
			</div> <!-- tema -->
			<div id="pie">
				<a href="#encabezado" title="Cabecera de p&aacute;gina">Volver a la cabecera de p&aacute;gina.</a>
				<ul class="listahorizontaldatos">
					<li class="paborde"><span class="desplazar">&copy; 2009 Classic Co.</span></li>
					<li>C&frasl; Rinc&oacute;n, 9</li>
					<li>Arganda del Rey</li>
					<li>28500 Madrid</li>
					<li>918 729 165</li>
					<li><a href="mailto:[email protected]" title="Correo electr&oacute;nico de Classic Co.">[email protected]</a></li>
				</ul>
				<ul class="listahorizontaldatos">
					<li class="paborde"><span class="desplazar">Mapa del sitio</span></li>
					<li>Aviso legal</li>
					<li>Privacidad</li>
					<li>Firma de autor</li>
				</ul>
			</div> <!-- pie -->
		</div> <!-- contenido -->
	</div> <!-- cuerpo -->
	<div id="inferior">
	</div>
</body>
</html>

Maicro · #15 (**permalink**) 12/10/2009, 08:31

Bueno, al final no he tenido que irme de viaje, así es que sigo dándole vueltas a esto.

Trasteando, veo que no puedo cargar el mapa en la propia página. Para que funcionase tendría que inhabilitar el JavaScript de de la hora y la hoja de estilo.

Maicro · #16 (**permalink**) 12/10/2009, 09:56

A falta de otra solución, dejo el iframe con esta cabecera correctamente validado el código:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ya sé que los maestros recomiendan no usar Trasitional, pero no soy capaz de encontrar una solución alternativa al iframe que no me dé problemas

Gracias.

deirdre · #17 (**permalink**) 12/10/2009, 10:08

No necesitas cambiar el doctype. Yo te recomiendo que elimines la página (ccgm.html) intermedia para cargar el mapa y que lo cargues directamente en la página principal, de esa forma evitas el uso de javascript, puedes seguir utilizando el object para el iframe y te valida perfectamente.

Prueba con esta composición (en la prescindimos de ccgm.html)

Te lo pongo en dos trozos porque el editor del foro no lo acepta tan largo:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head >
	<title>C&oacute;mo llegar a Classic Co. en Arganda del Rey, Madrid</title>
	<meta name="generator" content="Notepad++" />
	<meta content="text/html; charset=ISO-8859-15" http-equiv="content-type" />
	<meta name="description" content="Mapa de localizaci&oacute;n e instrucciones de c&oacute;mo ir en  transporte p&uacute;blico o privado a la tienda de Classic Co. situada en Arganda del  Rey, Madrid." />
	<meta name="keywords" content="moto, guzzi, motoguzzi, ducati, benelli, laverda, morini, clasica, classic, bikes, italiana, repuesto, competicion, accesorio, dellorto, dell'orto, delldell&acute;orto, orto, carburador, grimeca, tambor, tarozzi, tommaselli, fontana, ceriani, localizaci&oacute;n, direcci&oacute;n, ir, llegar, transporte, coche, autob&uacute;s, metro," />
	<meta name="author" content="Enrique Fraile Torrecilla Maicro" />
	<link rev="made" href="mailto:maicro@maicro.es" />
	<meta name="DC.Subject" content="Taller de motocicletas cl&aacute;sicas y modernas" />
	<meta name="DC.Description" content="Taller de reparaci&oacute;n y acondicionamiento de motocicletas, cl&aacute;sicas y modernas. Ya sean para su circulaci&oacute;n en vías p&uacute;blicas como para preparaciones para circuito." />
	<meta name="DC.Publisher" content="classicco.biz" />
	<meta name="DC.Publisher" content="classicco.es" />
	<link rel="stylesheet" href="../estilo.css" media="screen" type="text/css" title="Hoja de estilo de Classic Co." />
	<link rel="shortcut icon" href="../favicon.ico" />
	<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="../js/menu.js"></script>
	<style type="text/css">
	#mapnew {
		float: right;
		margin: -30px 20px 0px 20px;
		width: 400px;
		height: 300px;
	}
	</style>
</head>
<body>
	<div id="cuerpo">
		<div id="contenido">
			<div id="encabezado">
				<img src="../img/altiz.jpg" width ="300 px" height ="75 px" alt="Las motos de Classic Co. en acci&oacute;n" />
				<a href="http://www.classicco.es/" title="Inicio de Classic Co."><img src="../img/logoclassicco.jpg" width ="300 px" height ="75 px" alt="Logotipo de Classic Co." /></a>
				<img src="../img/altde.jpg" width ="300 px" height ="75 px" alt="Las motos de Classic Co. en acci&oacute;n" />
			</div>
			<div class="barramenu">
				<ul id="menu">
					<li><a href="#" title="El lado humano de Classic Co.">CLASSIC CO.</a>
						<ul class="submenu">
							<li><a href="#" title="La evoluci&oacute;n de Classic Co.">Nuestra historia</a></li>
							<li><a href="#" title="Nuestra tienda y taller">Qu&eacute; ofrecemos</a></li>
							<li><a href="#" title="C&oacute;mo encontrarnos">Localizaci&oacute;n</a></li>
							<li><a href="#" title="Para que no nos encuentres cerrado">Horarios de apertura</a></li>
							<li><a href="#" title="&iquest;Alguna duda? Escr&iacute;benos">Contacto</a></li>
						</ul>
					</li>
					<li><a href="#" title="Actualidad en Classic Co.">NOTICIAS</a>
						<ul class="submenu">
							<li><a href="#" title="Las primicias en Classic Co.">Novedades</a></li>
							<li><a href="#" title="Propuestas que te interesan">Ofertas</a></li>
							<li><a href="#" title="La colecci&oacute;n de Classic Co.">El museo</a></li>
							<li><a href="#" title="Actividades para compartir">Eventos</a></li>
							<li><a href="#" title="Classic Co. en los medios">En la prensa</a></li>
						</ul>
					</li>
					<li><a href="#" title="Accesorios y preparaciones">PROYECTOS</a>
						<ul class="submenu">
							<li><a href="#" title="Moto1">Moto1</a></li>
							<li><a href="#" title="Moto2">Moto2</a></li>
							<li><a href="#" title="Moto3">Moto3</a></li>
						</ul>
					</li>
					<li><a href="#" title="Las creaciones de Classic Co.">ESPECIAL</a>
						<ul class="submenu">
							<li><a href="#" title="La BellaRacer de Topete">El Jarama</a></li>
							<li><a href="#" title="El fruto de las grandes ideas y la pasi&oacute;n">Hypertwin HT01</a></li>
							<li><a href="#" title="&aacute;">Corsa Rosso</a></li>
							<li><a href="#" title="&aacute;">Corsa Verde</a></li>
							<li><a href="#" title="&aacute;">750 Bicolore</a></li>
							<li><a href="#" title="&aacute;">Jawa 500</a></li>
							<li><a href="#" title="&aacute;">Jawa 500 Bialbero</a></li>
							<li><a href="#" title="&aacute;">Ducati 450</a></li>
						</ul>
					</li>
					<li><a href="#" title="Venta de accesorios v&iacute;a electr&oacute;nica">TIENDA</a>
					</li>
					<li><a href="#" title="Documentos para bajarte">DESCARGAS</a>
						<ul class="submenu">
							<li><a href="#" title="Fondos de pantalla">Escritorio</a></li>
							<li><a href="#" title="Los manuales para las reparaciones de la moto">Libros de taller</a></li>
							<li><a href="#" title="Los manuales para las piezas de la moto">Libros de despiece</a></li>
							<li><a href="#" title="Consejos y trucos para nuestras m&aacute;quinas">Informaci&oacute;n &uacute;til</a></li>
						</ul>
					</li>
					<li><a href="#" title="Todo lo vinculado a Classic Co.">ENLACES</a>
						<ul class="submenu">
							<li><a href="#" title="Los compañeros de fatigas">Colaboradores</a></li>
							<li><a href="#" title="Con los que compartimos nuestra pasi&oacute;n">Nos gustan</a></li>
						</ul>
					</li>
				</ul>
			</div> <!-- barramenu -->
			<div id="barraestado">
				<div id="hora">
					<span id="liveclock"></span>
					<script type="text/javascript" src="../js/hora.js"></script>
				</div>
				<div id="dia">
					<script type="text/javascript" src="../js/dia.js"></script>
				</div>
				<div id="localizacion">
					Ubicaci&oacute;n: <a href="../inicio/inicio.html" title="Presentaci&oacute;n de Classic Co.">Classic Co.</a> &gt; Localizaci&oacute;n
				</div>
			</div> <!-- barraestado -->
<!-- continúa abajo -->

Lo que he cambiado o añadido tiene este comentario en el código fuente:


Prueba y nos dices...

Bye

deirdre · #18 (**permalink**) 12/10/2009, 10:09

El otro trozo:

Código HTML:

 <div id="tema">
				<h1>Ven a visitarnos a Classic Co.</h1>
				<p><span class="classicco">Classic Co.</span> nos encontramos en el pol&iacute;gono industrial Rinc&oacute;n, en Arganda del Rey. A un par de kil&oacute;metros del <strong>Hospital del Sureste</strong>. Nuestra direcci&oacute;n es:</p>
				<span class="classicco">Classic Co.</span>
				<!-- SUSTITUIDO <object id="map" type="text/html" data="ccgm.html">ERROR (no puede mostrarse el objeto)</object>-->
				<!-- NUEVO --><object id="mapnew" data="http://maps.google.es/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=C%2F+Rinc%C3%B3n,+9+arganda+del+rey&amp;sll=40.331366,-3.45932&amp;sspn=0.230313,0.435333&amp;ie=UTF8&amp;hq=&amp;hnear=Calle+del+Rinc%C3%B3n,+9,+28500+Arganda+del+Rey,+Madrid,+Comunidad+de+Madrid&amp;ll=40.312716,-3.456059&amp;spn=0.0072,0.013604&amp;z=14&amp;output=embed" type="text/html" width="400" height="200"></object>
				<!-- Añadido un nuevo id (mapnew) arriba de este html: incorpóralo a tu hoja de estilo -->
				<ul class="datos">
					<li>C/ Rinc&oacute;n, 9</li>
					<li>Pol&iacute;gono Industrial El Rinc&oacute;n</li>
					<li>28500 Arganda del Rey (Madrid)</li>
					<li>Espa&ntilde;a</li>
				</ul>
				<!-- NUEVO --><div style="clear: both"></div>
				<p>Puedes venir a vernos tanto en transporte  p&uacute;blico como en tu veh&iacute;culo privado.</p>
				<div class="imgizq">
					<img src="img/metro.jpg" width="400 px" height="110 px" alt="Estaci&oacute;n de Metro de Arganda del Rey para ir a Classic Co." />
					<p class="piefoto">Estaci&oacute;n de Metro de Arganda del Rey.</p>
				</div>
				<p>A un kil&oacute;metro y medio tenemos la estaci&oacute;n de <a href="http://www.metromadrid.es/es/viaja_en_metro/red_de_metro/estaciones/Arganda.html" title="P&aacute;gina de la estaci&oacute;n de Arganda del Rey de Metro de Madrid"><strong>Metro</strong> de <em>Arganda del Rey</em></a>, de la l&iacute;nea <strong>L9</strong>. Una vez salimos de la estaci&oacute;n, descendemos setecientos metros por el Paseo de la Estaci&oacute;n primero y por la Avenida del Ej&eacute;rcito despu&eacute;s hasta la gran glorieta. En la glorieta, seguimos rectos por la Avenida de Madrid y, tras quinientos metros, llegamos a la Calle del Rinc&oacute;n, donde se encuentra <span class="classicco">Classic Co.</span>, a la altura del n&uacute;mero 9. <a href="http://maps.google.com/maps?f=d&source=s_d&saddr=paseo+de+la+estaci%c3%b3n&daddr=calle+del+rinc%c3%b3n&geocode=fzb7zgidgmxl_w%3bfqt_zgidldpl_w&hl=es&mra=ls&dirflg=w&sll=40.304747,-3.452035&sspn=0.006447,0.009645&ie=utf8&z=16" title="C&oacute;mo ir de la parada de Metro a Classic Co. en GoogleMaps">Aqu&iacute;</a> tienes la ruta para llegar en GoogleMaps.</p>
				<div class="imgder">
					<img src="img/autobus.jpg" width="400 px" height="210 px" alt="Parada de autob&uacute;s para ir a Classic Co." />
					<p class="piefoto">Parada de autob&uacute;s de las l&iacute;neas 330, 2, 312, 312A, 285, 311 y 311A.</p>	
				</div>
				<p><strong>Argabus</strong> es la empresa de transporte de pasajeros por carretera encargada de las l&iacute;neas de autobuses urbanos en Arganda del Rey, adem&aacute;s de las l&iacute;neas de autobuses interurbanos que conectan Arganda del Rey con los municipios cercanos. En la p&aacute;gina web de <a href="http://www.argabus.com/argabus-0.1/webLineas/interurbanoPadre" title="P&aacute;gina web de Argabus"><strong>Argabus</strong></a> encontrar&aacute;s toda la informaci&oacute;n necesaria para venir a <span class="classicco">Classic Co.</span> en autob&uacute;s. Si vienes desde la ciudad Madrid, en Conde de Casal se encuentra el inicio de las dos l&iacute;neas de autobuses interurbanos que llegan a Arganda del Rey, las l&iacute;neas <a href="http://www.ctm-madrid.es/htdocs/esquemas/80311H1.gif" title="Esquema de la l&iacute;nea 311"><strong>311</strong></a> y <a href="http://www.ctm-madrid.es/htdocs/esquemas/80312H1.gif" title="Esquema de la l&iacute;nea 312"><strong>312</strong></a>. La parada para <span class="classicco">Classic Co.</span> se encuentra ubicada en la Avenida de Madrid n&uacute;mero 7, frente al Autoservicio Dia. Retrocediendo cuatrocientos metros por la Avenida de Madrid llegamos a la Calle del Rinc&oacute;n, donde se encuentra <span class="classicco">Classic Co.</span>, a la altura del n&uacute;mero 9. <a href="http://maps.google.com/maps?f=d&source=s_d&saddr=avenida+de+madrid,+7,+arganda+del+rey&daddr=rincon,+9,+arganda+del+rey&hl=es&geocode=&mra=ls&dirflg=w&sll=40.30535,-3.45864&sspn=0.012895,0.01929&ie=utf8&z=18" title="C&oacute;mo ir de la parada de autob&uacute;s a Classic Co. en GoogleMaps">Aqu&iacute;</a> tienes la ruta para llegar en GoogleMaps.</p>
				<p>Para venir en tu veh&iacute;culo autom&oacute;vil deber&aacute;s de coger la autov&iacute;a <strong>A-3 / E-901</strong>. Debes de tomar la <em>salida 22</em>. En la glorieta debes de coger la salida <em>&quot;Arganda&quot;</em>, la primera salida de la glorieta si vienes por la <strong>A-3</strong> desde Madrid, la segunda salida de la glorieta si ibas de entrada a Madrid por la <strong>A-3</strong>. As&iacute;, entrar&aacute;s en la Avenida de Madrid, por la que discurrir&aacute;s poco m&aacute;s de dos kil&oacute;metros y atravesar&aacute;s una glorieta hasta llegar a otra nueva glorieta. Esta &uacute;ltima glorieta es f&aacute;cilmente distinguible porque desde la misma se puede acceder directamente a una gasolinera BP. Pues bien, seguiremos rectos por la Avenida de Madrid, pero tras esta glorieta, lo haremos por la v&iacute;a de servicio, como si hubi&eacute;semos querido acceder a la gasolinera. Trescientos metros m&aacute;s adelante encontraremos la Calle del Rinc&oacute;n, donde se encuentra <span class="classicco">Classic Co.</span>, a la altura del n&uacute;mero 9.</p>
			</div> <!-- tema -->
			<div id="pie">
				<a href="#encabezado" title="Cabecera de p&aacute;gina">Volver a la cabecera de p&aacute;gina.</a>
				<ul class="listahorizontaldatos">
					<li class="paborde"><span class="desplazar">&copy; 2009 Classic Co.</span></li>
					<li>C&frasl; Rinc&oacute;n, 9</li>
					<li>Arganda del Rey</li>
					<li>28500 Madrid</li>
					<li>918 729 165</li>
					<li><a href="mailto:[email protected]" title="Correo electr&oacute;nico de Classic Co.">[email protected]</a></li>
				</ul>
				<ul class="listahorizontaldatos">
					<li class="paborde"><span class="desplazar">Mapa del sitio</span></li>
					<li>Aviso legal</li>
					<li>Privacidad</li>
					<li>Firma de autor</li>
				</ul>
			</div> <!-- pie -->
		</div> <!-- contenido -->
	</div> <!-- cuerpo -->
	<div id="inferior">
	</div>
</body>
</html>

Bye

Maicro · #19 (**permalink**) 12/10/2009, 10:47

Ya lo he estudiado ya ahora lo pruebo. Para varias, gracias. ;)

Maicro · #20 (**permalink**) 12/10/2009, 11:06

Hasta ahora he estado reordenando para tener un único directorio para los JavasScript y una única hoja de estilo. Es ahora cuando he descubierto el fallo de iepngfix.htc, que en la hoja de estilo tiene que llevar la ruta desde el archivo html y no desde la misma hoja... ¡Ya me vale! :D

Maicro · #21 (**permalink**) 12/10/2009, 15:39

Toma Deirdre, te la has ganado

Disculpa la tardanza en responder, pero me he retrasado por muchas cosas.

Primero quería poner un enlace de GoogleMaps con una foto que puse hace tiempo en Panoramio de la tienda de mi amigo.

Luego, al codificar la dirección de GoogleMaps en caracteres &xxx; para la validación, Karpersky me lo detectaba como virus. Finalmente, haciendo pruebas, sólo tuve que cambiar el símbolo negativo de la latitud.

Finalmente, gracias a tu código, he pasado la convalidación en Stric sin necesidad de depender de otro archivo que contuviera el mapa. El mapa, adaptado a la página, ha quedado con este código:

Código:

<object id="gmap" data="http://maps.google.com/maps?q=classic+co&amp;hl=es&amp;ie=UTF8&amp;view=map&amp;cid=6404945727478394227&amp;hq=classic+co&amp;hnear=&amp;ll=40.307938,-3.46653&amp;spn=0.006295,0.006295&amp;z=13&amp;output=embed" type="text/html"></object>

Su estilo -no requería margen negativo-:

Código:

object#gmap {
	float: right;
	margin: 10px 20px 10px 20px;
	width: 400px;
	height: 220px;
}

Finalmente no necesita el clear: both; tras el objeto del mapa. Si tienes ganas ;) ya me explicarás porqué me lo ponías.

El resultado: http://www.classicco.es/temp/localiz...alizacion.html

Sin embargo

en IE6:
• En esta página http://www.classicco.es/temp/inicio/inicio.html me saca un borde en el PNG del escudo.
• En esta página http://www.classicco.es/temp/localiz...alizacion.html:
· No saca el mapa.
· El mapa queda por encima de las opciones del menú, el submenú desplegado de Especial.

¿Alguien podría decirme sin en IE 7/8 se ve correctamente el escudo, el menú y el mapa?

¿Alguna sugerencia al respecto? Gracias.

Maicro · #22 (**permalink**) 12/10/2009, 15:47

Por si Strato, como a mí, no va bien, también la tengo en Hostalia.

http://www.maicro.es/classicco/
http://www.maicro.es/classicco/inicio/inicio.html
http://www.maicro.es/classicco/local...alizacion.html

Gracias.

deirdre · #23 (**permalink**) 12/10/2009, 16:17

Resultado de un visionado:

http://www.maicro.es/classicco/
(ie6 = bien; ie7 = bien; ie8 = bien)
_______________

http://www.maicro.es/classicco/inicio/inicio.html
( ie6 = mal (falta esto http://www.maicro.es/classicco/inicio/blank.gif; ie7 = bien; ie8 = bien)
_______________

http://www.maicro.es/classicco/local...alizacion.html (ie6 = mal (no carga el mapa); ie7 = mal (no carga el mapa); ie8 = mal (no carga el mapa))

Para arreglar inicio.html sólo tienes que poner blank.gif en la carpeta inicio y resuelto el tema de la transparencia y del marco de imagen no encontrada.

Tienes un problema grave con localizacion.html: en ningún iexplorer carga el mapa (estudia mi modelo que sí se carga bien en cualquier navegador).

Por otra parte, a mi me parece que el index (la primera página del sitio) deberías organizarla de otro modo, pues tarda mucho en cargarse, y eso siempre es mala cosa para la primera página de un sitio.

Bye

Maicro · #24 (**permalink**) 13/10/2009, 02:58

A ver si un día me dices cómo mantienes IE6, IE7 e IE8 :D

Cita:

Iniciado por deirdre

Resultado de un visionado:

http://www.maicro.es/classicco/inicio/inicio.html
( ie6 = mal (falta esto http://www.maicro.es/classicco/inicio/blank.gif; ie7 = bien; ie8 = bien)

¡¿Es por eso?! ¡Andá! Yo es que entendí que blank.gif tenía que acompañar a iepngfix.htc. ¡Ya me vale! Muchas gracias. A ver lo siguiente...

Maicro · #25 (**permalink**) 13/10/2009, 03:03

Cita:

Iniciado por deirdre

Tienes un problema grave con localizacion.html: en ningún iexplorer carga el mapa (estudia mi modelo que sí se carga bien en cualquier navegador).

Pues a pelearme toca, porque en local sí que lo saca

. Veamos...

Maicro · #26 (**permalink**) 13/10/2009, 03:23

Código:

<div style="clear: both">

hace perder el degradado inferior, así es que, de momento, lo quito.

Maicro · #27 (**permalink**) 13/10/2009, 03:35

En http://www.maicro.es/classicco/local...alizacion.html he puesto este código:

Código:

<!-- <object id="gmap" data="http://maps.google.com/maps?q=classic+co&amp;hl=es&amp;ie=UTF8&amp;view=map&amp;cid=6404945727478394227&amp;hq=classic+co&amp;hnear=&amp;ll=40.307938,-3.46653&amp;spn=0.006295,0.006295&amp;z=13&amp;output=embed" type="text/html"></object> -->
<object id="gmap" data="http://maps.google.es/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=C%2F+Rinc%C3%B3n,+9+arganda+del+rey&amp;sll=40.331366,-3.45932&amp;sspn=0.230313,0.435333&amp;ie=UTF8&amp;hq=&amp;hnear=Calle+del+Rinc%C3%B3n,+9,+28500+Arganda+del+Rey,+Madrid,+Comunidad+de+Madrid&amp;ll=40.312716,-3.456059&amp;spn=0.0072,0.013604&amp;z=14&amp;output=embed" type="text/html" width="400" height="220"></object>

El cual tiene asociado este CSS:

Código:

object#gmap {
	float: right;
	margin: 10px 20px 10px 20px;
	width: 400px;
	height: 220px;
}

Y nada, el IE sigue sin mostrar el mapa.

Pero, lo peor, probé a subir directamente tu código, http://www.maicro.es/classicco/local...n/deirdre.html, y tampoco representa el mapa IE...

Además de que el menú sigue quedando por debajo del objeto que contiene el mapa...

Maicro · #28 (**permalink**) 13/10/2009, 03:37

Cita:

Iniciado por deirdre

Por otra parte, a mi me parece que el index (la primera página del sitio) deberías organizarla de otro modo, pues tarda mucho en cargarse, y eso siempre es mala cosa para la primera página de un sitio.

Tienes razón. Es porque he cargado demasiadas imágenes en la lista. Reduciré el número de imágenes.

Maicro · #29 (**permalink**) 13/10/2009, 05:13

Nada, no hay forma. Deirdre, tu código en el IE8 del ordenador de mi hermano tampoco muestra el mapa. ¡Cachis!