javascript - 当在 Chrome 和 Firefox 中声明 DOCTYPE 时，Google Map API 不起作用

Question

我有一个奇怪的问题，当我声明 DOCTYPE 时，我的 Google Maps API 脚本不起作用，没有呈现 map 。

在没有 DOCTYPE 的情况下，我收到以下警告，但它有效并且呈现了一个 map :

Resource interpreted as Other but transferred with MIME type undefined.

我不知道哪里出了问题，但我希望这里的高手能知道!

在这里你可以看到没有 DOCTYPE 的脚本:
[链接已删除，因为问题已回答]

...这里是声明为 HTML5 的 DOCTYPE:
[链接已删除，因为问题已回答]

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

不同之处在于文档类型声明使浏览器进入标准模式，而不是怪癖模式。这就是您的 JavaScript 中的一个小错误起作用的地方。

在这两个实例中都创建了 map ，但是当声明了 doctype 时， map 的高度为 0，宽度设置为其默认值 (100%)。

您有这段代码可以设置 map 的宽度和高度:

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';
}