在Chrome和Firefox中聲明DOCTYPE時，Google Map API不起作用

Question

當我聲明一個DOCTYPE時，我的Google Maps API腳本無法正常工作，我沒有這個奇怪的問題，沒有顯示地圖。

沒有一個DOCTYPE我得到以下警告，但它的工作原理和地圖呈現：

資源解釋爲其他但MIME類型不確定的轉移。

我有沒有真正的線索，什麼是錯的，但我在這裏希望有行家可能！

在這裏你可以看到在動作腳本沒有DOCTYPE：
[鏈接刪除，因爲問題的答案]

...這裏它與聲明爲HTML5 DOCTYPE：
[鏈接刪除SINCE問題的答案]

JavaScript源是相當長的，但你可以在這裏找到：
[鏈接刪除，因爲問題的答案]
但是，如果有人關心，我已經公開發布http://snipt.org/yZgm2！

謝謝你的時間！

更新1：

所以，好像我的JavaScript是沒有問題的。但是div元素沒有高度或寬度，並且出於某種原因，不管是否使用DOCTYPE，div元素都有所不同。

So new question！

爲什麼當我聲明DOCTYPE時下面的代碼部分不工作？

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

更新2：

由於雙方@fivedigit和@duncan您指出的CSS問題。簡單地添加測量單元解決了這一切！

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

Answer 1

不同的是，DOCTYPE聲明使得瀏覽器去進入標準模式，而不是怪癖模式。這就是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的股利，地圖會在嘗試添加這樣的事情：

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