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

У меня возникла эта странная проблема, когда мой скрипт Google Maps API не работает, карта не отображается, когда я объявляю 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 и @duncan за указание на проблему с CSS. Простое добавление единицы измерения решило все!

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

javascript google-maps-api-3 javascript-objects
person jamietelin    schedule 31.01.2012    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Разница в том, что объявление 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';
}
person fivedigit    schedule 31.01.2012
comment
Ааааа! Спасибо! Свел меня с ума! ^^ Работало без DOCTYPE и работало в IE8 в обоих случаях (на этот раз что-то работало в IE). Но теперь все ясно. - person jamietelin; 31.01.2012

arrow_upward
5
arrow_downward

Вероятно, вам нужно что-то сделать с CSS для div, в котором будет находиться карта. Попробуйте добавить что-то вроде этого:

<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map1 { height: 100% }
</style>
person duncan    schedule 31.01.2012
comment
Как только вы написали это, я понял это! Но вопрос в том, почему это работает без DOCTYPE? И в моем сценарии я добавляю ширину и высоту к элементу div, почему это не работает? - person jamietelin; 31.01.2012
comment
это работает и для меня, теперь я могу использовать ‹!DOCTYPE html› с этим css html { height: 100% } body { height: 100% } в моем приложении rails - person Sohair Ahmad; 27.12.2016