API Google Map API не работает, когда DOCTYPE объявлен в Chrome и Firefox

Question

У меня есть эта странная проблема, когда мой скрипт API Карт Google не работает, Карта не отображается, когда я объявляю DOCTYPE.

Без DOCTYPE я получаю следующее предупреждение, но он работает и карта оказывается:

Ресурс интерпретируется как другие, но передается с MIME типа неопределенным.

У меня нет никакого реального понятия к тому, что это неправильно, но я надеюсь, что некоторые здесь может профессионалом!

Здесь вы можете увидеть скрипт в действии без DOCTYPE:
[LINK REMOVED SINCE вопрос отвечает]

... и вот он с DOCTYPE объявлен как HTML5:
[LINK Удалены ПОСКОЛЬКУ вопрос решается]

источник

JavaScript довольно долго, но вы можете найти его здесь:
[LINK REMOVED SINCE вопрос отвечает]
Но я сделал это общедоступным по адресу http://snipt.org/yZgm2, если кто-нибудь позаботится!

Благодарим вас за внимание!

UPDATE 1:

Так, похоже, мой JavaScript не проблема. Но div-element не имел высоты или ширины, и по какой-то причине он работает с DOCTYPE или без него.

Итак, новый вопрос!

Почему следующая часть кода не работает, когда я объявил DOCTYPE?

var mapElement = document.getElementById(mapOptions['mapid']); 
mapElement.style.width=mapOptions['width']; 
mapElement.style.height=mapOptions['height']; 

UPDATE 2:

Благодаря как @fivedigit и @duncan для указывая на проблему CSS. Просто добавив блок измерения, он решил все!

mapElement.style.width=mapOptions['width']+'px'; 
mapElement.style.height=mapOptions['height']+'px'; 

Answer 1

Разница заключается в том, что декларация доктайп делает браузер перейти в стандартном режиме, а не в режиме причуд. И вот тут немного ошибок в вашем JavaScript.

Карта создается в обоих экземплярах, но когда объявлен doctype, высота карты равна 0, а ширина - по умолчанию (100%).

У вас есть этот кусок кода, где можно указать ширину и высоту карты:

if(mapOptions['width'] !== false){ 
    mapElement.style.width=mapOptions['width']; 
} 
if(mapOptions['height'] !== false){ 
    mapElement.style.height=mapOptions['height']; 
} 

Вы забыли указать устройство там, и в стандартном режиме, это правило стиля, то будет отброшено. Измените для этого код, чтобы он работал:

if(mapOptions['width'] !== false){ 
    mapElement.style.width=mapOptions['width'] + 'px'; 
} 
if(mapOptions['height'] !== false){ 
    mapElement.style.height=mapOptions['height'] + 'px'; 
} 

Answer 2

Вы, вероятно, нужно сделать что-то о CSS для DIV, что карта будет в Попробуйте добавить что-то вроде этого:.

<style type="text/css"> 
html { height: 100% } 
body { height: 100%; margin: 0; padding: 0 } 
#map1 { height: 100% } 
</style>