Google Map не работает с XHTML Doctype (тип документа) - PullRequest
Новая
       14

Google Map не работает с XHTML Doctype (тип документа)

8 голосов
/ 10 июля 2010

С какой стати всегда существует вероятность того, что, если мы будем использовать «Doctype» с Картами Google, возникнет проблема с правильным отображением Карты Google?

В недавнем случае этот «Doctype» просто занял у меня 2 дня без какой-либо производительности.Что за отвратительный случай?На этот раз мне помог один из моих коллег (Субханкар Баннерджи), и большое спасибо ему за своевременную и эффективную помощь.Он также упомянул об этой же проблеме, с которой он сталкивался много раз.

Может кто-нибудь сказать мне, почему эта проблема Doctype происходит с Google Map?

Любая помощь очень ценится.

РЕДАКТИРОВАТЬ (для комментария @Balus): -
Я использовал (X) HTML 1.0 Transitional Doctype для браузеров Mozilla FF и Google Chrome.Я еще не проверял эту Карту Google в IE v6 +, поэтому не могу комментировать эти браузеры.

Ответы [ 4 ]

16 голосов
/ 23 июля 2010

У меня была такая же проблема с Google Maps API v3 некоторое время назад, и я должен сказать, что отладку было нелегко.

Дело в том, что если вы этого не сделаетеиспользуйте DOCTYPE на своей странице, страница отображается в режиме причуд.В основном это позволяет использовать стили без каких-либо дополнительных CSS или JavaScript.В этом случае вы можете использовать этот бит для загрузки карты: 

<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>

Однако, с DOCTYPE страница отображается так, как говорит DOCTYPE.Установка стиля, такого как выше, не будет работать без дополнительного CSS, так как он использует проценты.Элемент не имеет размера, поэтому вы в итоге получаете 100% ничего.Поэтому, если вы используете XHTML 1.0 Strict, то есть. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">

Страница отображается так, как должна, если вы используете пиксели вместо процентов: 

<body onload="initialize()">
  <div id="map_canvas" style="width:500px; height:400px"></div>
</body>

Вы можете сделать это также в CSS.

Итак, ваши варианты здесь:

  1. Оставьте DOCTYPE и используйте пиксели вместо процентов ИЛИ укажите ширину и высоту с помощью CSS.

  2. Удалите DOCTYPE и используйте проценты.Это не рекомендуется, так как в документе всегда должно указываться, с каким DTD оно должно отображаться.

Подробнее о режиме Quirks можно узнать из здесь. Также естьтаблица, показывающая, как разные браузеры реагируют на отсутствие DTD.

1 голос
/ 20 июля 2010 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Я использую этот тип документа, и, похоже, он работает нормально. Это может быть просто ваш бутстрап. Как вы загружаете Google? Какие ошибки вы получаете? Показать, какой результат вы получаете?

0 голосов
/ 25 сентября 2015

Быстрое решение могло бы быть следующим:

document.getElementById("google-map").style.height = $(window).height()+'px';

до

var map = new google.maps.Map(document.getElementById("google-map"), myMapOptions);

Это работает очень хорошо сдоктайп.Пробовал и проверял!:)

0 голосов
/ 20 июля 2010

Ваш вопрос говорит "если мы используем 'Doctype'".Значит ли это, что ты не делал раньше?Если вы не сделали этого раньше, то, по сути, вы меняете «правила» того, как будет размещена веб-страница.Без правильного типа документа вы находитесь в режиме причуд.

...