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