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

Question

我有一個奇怪的問題，當我聲明DOCTYPE時，我的Google Maps API腳本不起作用， 沒有呈現任何地圖 。

如果沒有DOCTYPE，我會收到以下警告，但它可以正常工作並呈現地圖 ：

資源被解釋為“其他”，但以未定義的MIME類型傳輸。

我不知道到底是哪里出了問題，但我希望這里有些巫婆！

在這里，您可以看到沒有DOCTYPE的實際腳本：
[回答問題后，鏈接已刪除]

...這就是DOCTYPE聲明為HTML5的情況：
[回答問題后，鏈接已刪除]

JavaScript源很長，但是您可以在這里找到它：
[回答問題后，鏈接已刪除]
但是，如果有人關心的話，我已經在http://snipt.org/yZgm2上公開了它！

感謝您的時間！

更新1：

因此，似乎我的JavaScript並不是問題。 但是div元素開始時沒有高度或寬度，並且由於某些原因，不管有沒有DOCTYPE，它的工作原理都是不同的。

那么新的問題！

為什么我聲明了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

您可能需要對地圖所在的div的CSS進行一些處理。嘗試添加以下內容：

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