2010-07-10 14 views
8

Perché sulla Terra c'è sempre la possibilità che se utilizziamo "Doctype" con Google Maps, ci sarà un problema nel mostrare correttamente la Mappa di Google?Google Map non funziona con XHTML Doctype (Tipo di documento)

In un caso recente, questo "Doctype" ha preso solo i miei 2 giorni senza alcuna produttività. Che caso disgustoso? Questa volta ho avuto l'aiuto di uno dei miei colleghi (Subhankar Bannerjee), e molte grazie a lui grazie al suo tempestivo aiuto &. Accennò anche a questo stesso problema, che aveva affrontato molte volte.

Qualcuno può dirmi perché questo problema di tipo Doctype si verifica con Google Map?

Qualsiasi aiuto è molto apprezzato.

EDIT (per il commento di @Balus): -
stavo usando la (X) HTML 1.0 Transitional Doctype, per Mozilla FF & browser Google Chrome. Non ho ancora controllato questa mappa di Google in IE v6 +, quindi non posso commentare quei browser.

+1

Quale doctype esattamente? Quali sono esattamente i webbrowser? Sai (e capisci) http://hsivonen.iki.fi/doctype/? – BalusC

+0

@Balus: collegamento Nice fornito. Grazie –

+2

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

risposta

16

Ho avuto lo stesso problema con Google Maps API v3 qualche tempo fa e devo dire che non è stato facile eseguire il debug.

La cosa qui è che se non si utilizza DOCTYPE sulla pagina, la pagina viene visualizzata in modalità quirk. Fondamentalmente questo permette di usare stili senza CSS o JavaScript aggiuntivi. In questo caso si potrebbe usare questo bit per caricare la mappa:

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

Tuttavia, con DOCTYPE la pagina viene visualizzata come il DOCTYPE dice così. L'impostazione di uno stile come sopra non funzionerebbe senza CSS aggiuntivi poiché utilizza percentuali. L'elemento non ha una dimensione, quindi finisci per prendere il 100% del nulla. Quindi, se si utilizza XHTML 1.0 Strict, vale a dire.

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

La pagina rende come dovrebbe, se si utilizza pixel invece di percentuali:

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

Si potrebbe farlo anche in CSS.

Quindi le opzioni sono qui:

  1. Lascia il DOCTYPE e utilizzare pixel invece di percentuali OR specificare la larghezza e l'altezza tramite CSS.

  2. Rimuovere il DOCTYPE e utilizzare le percentuali. Questo non è raccomandato in quanto il documento dovrebbe sempre dire con quale DTD deve essere reso.

È possibile trovare maggiori informazioni sulla modalità quirk here. C'è anche una tabella che mostra come i diversi browser reagiscono alla mancanza di DTD.

+1

+1 per il 100% usa questo css - .map {width: 500px; altezza: 500 px; posizione: fissa! importante; a sinistra: 0; z-index: 1; top: 0;} –

+0

Da utilizzare prima di creare l'oggetto mappa 'document.getElementById (" google-map "). style.height = $ (window) .height() + 'px';' – kushpf

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

Sto usando questo doctype e sembra funzionare bene. Potrebbe essere solo il tuo bootstrap. Come stai caricando Google? Quali errori stai ottenendo? Mostra quale tipo di risultato stai ottenendo?

0

La tua domanda dice "se usiamo 'Doctype'". Questo significa che non l'hai fatto prima? Se non l'hai fatto prima, quindi, in sostanza, stai cambiando le "regole" di come verrà presentata una pagina web. Senza un doctype appropriato, sei in modalità strane.

0

Una soluzione rapida potrebbe essere quella di utilizzare come segue:

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

prima

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

Funziona abbastanza bene con doctype. Provato e testato! :)