Google Map API не работает, когда DOCTYPE объявлен в Chrome и Firefox

Question

У меня странная проблема, когда мой скрипт API Карт Google не работает, карта не отображается , когда я объявляю DOCTYPE.

Без 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 и @Дункан за указание на проблему CSS.Простое добавление единицы измерения решило все!

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

Answer 1

Разница в том, что объявление doctype заставляет браузер переходить в стандартный режим, а не в режим причуд.И вот тут возникает небольшая ошибка в вашем JavaScript.

Карта создается в обоих случаях, но когда тип документа объявлен, высота карты равна 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 для div, в котором будет карта. Попробуйте добавить что-то вроде этого:

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