在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>