2010-07-10 8 views
8

¿Por qué en la tierra siempre existe la posibilidad de que si usamos "Doctype" con Google Maps, habrá un problema para mostrar Google Map correctamente?Google Map no funciona con XHTML Doctype (Tipo de documento)

En un caso reciente, este "Doctype" solo me tomó mis 2 días sin ninguna productividad. ¿Qué caso tan repugnante? Esta vez obtuve la ayuda de uno de mis colegas (Subhankar Bannerjee), y muchas gracias a él por su oportuna ayuda &. También mencionó sobre este mismo problema, al que se había enfrentado muchas veces.

¿Alguien puede decirme por qué este problema tipo Doct ocurre con Google Map?

Cualquier ayuda es muy apreciada.

EDIT (para hacer comentarios de @Balus): -
que estaba usando la (X) HTML 1.0 Doctype de Transición, para Mozilla FF & navegadores Google Chrome. Todavía no he revisado este mapa de Google en IE v6 +, por lo que no puedo comentar sobre esos navegadores.

+1

¿Qué doctype exactamente? ¿Qué navegadores web exactamente? ¿Sabes (y entiendes) http://hsivonen.iki.fi/doctype/? – BalusC

+0

@Balus - Buen enlace proporcionado. Gracias –

+2

http://stackoverflow.com/questions/2127601/doctype-error-with-googlemaps – iamgopal

Respuesta

16

Tuve el mismo problema con Google Maps API v3 hace un tiempo y debo decir que no fue fácil de depurar.

Lo que sucede aquí es que si no usa DOCTYPE en su página, la página se procesa en modo peculiar. Básicamente, esto permite usar estilos sin CSS o JavaScript adicionales. En este caso se puede usar este bit para cargar el mapa:

<body onload="initialize()"> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
</body> 

Sin embargo, con el DOCTYPE página se representa como el DOCTYPE lo dice. Establecer un estilo como el anterior no funcionaría sin ningún CSS adicional ya que está usando porcentajes. El elemento no tiene un tamaño, por lo que terminas tomando el 100% de nada. Entonces, si estás usando XHTML 1.0 Strict, es decir.

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

La página se representa como debe si utilizar píxeles en lugar de porcentajes:

<body onload="initialize()"> 
    <div id="map_canvas" style="width:500px; height:400px"></div> 
</body> 

Se podría hacer eso también en el CSS.

Así que sus opciones son aquí:

  1. Deje el DOCTYPE y utilizar píxeles en lugar de porcentajes O especificar la anchura y la altura a través de CSS.

  2. Elimine el DOCTYPE y use porcentajes. Esto no se recomienda ya que el documento siempre debe decir con qué DTD se debería representar.

Puede encontrar más información sobre el modo Peculiaridades de here. También hay una tabla que muestra cómo los diferentes navegadores reaccionan a la falta de DTD.

+1

+1 para 100% use este css - .map {ancho: 500px; altura: 500px; posición: fijo! importante; izquierda: 0; índice z: 1; arriba: 0;} –

+0

Use esto antes de crear el objeto de mapa 'document.getElementById (" google-map "). style.height = $ (ventana) .height() + 'px';' – kushpf

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

Estoy usando este doctype, y parece estar funcionando bien. Puede ser solo tu arranque. ¿Cómo estás cargando Google? ¿Qué errores estás obteniendo? ¿Muestra qué tipo de resultado está obteniendo?

0

Su pregunta dice "si usamos 'Doctype'". ¿Esto significa que no lo hiciste antes? Si no lo hizo antes, entonces, esencialmente, está cambiando las 'reglas' de cómo se diseñará una página web. Sin un doctype adecuado, estás en el modo peculiar.

0

Una solución rápida podría ser el uso de la siguiente manera:

document.getElementById("google-map").style.height = $(window).height()+'px';

antes

var map = new google.maps.Map(document.getElementById("google-map"), myMapOptions);

Funciona bastante bien con tipo de documento. ¡Tratado y probado! :)

Cuestiones relacionadas