Перестает работать API при указании <!DOCTYPE html>

Пост в архиве.

musstudent

29 октября 2017, 12:27

На php написана простая страничка. Данные грузятся в json. Если указан <!DOCTYPE html>, то почему-то перестает грузиться и карта и метки. Убираешь <!DOCTYPE html> - все работает. Без <!DOCTYPE html> ругается валидатор, хотя все работает. В консоли чисто. Ошибк php нет. На других страницах сайта (отдельные php-файлы), где вставлены карты с отдельными метками все работает (<!DOCTYPE html> на них указан). На большой карте, где все метки выводятся вместе - такой казус.

12 комментариев

Авторизуйтесь, чтобы оставить комментарий

серёга

29 октября 2017, 12:38

Добрый день, можно пример страницы?

musstudent

29 октября 2017, 13:17

HTML. То же самое, но без DOCTYPE грузит данные по json.

<!DOCTYPE HTML>
<html>
<head>
<title>За Христа пострадавшие - интерактивная карта гонений новомучеников на территории Саратовской митрополии</title>
<meta name="description" content="Интерактивная карта гонений на православную веру во время репрессий 1920-1930-х годов в СССР на территории саратовской митрополии" />
<meta name="keywords" content="новомученики, новомученики саратов, саратов новомученики, новомученики саратовской области, саратовская область новомученики, новомученики и исповедники, гонения на церковь, гонения за веру, репрессии, репрессии священников, репрессии верующих, преследования за веру в СССР" />
<link href="favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<meta name="yandex-verification" content="cc44bedf3087f761" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=yes"/>
<meta name="HandheldFriendly" content="true" />
<meta name="apple-mobile-web-app-capable" content="YES" />
<link rel="stylesheet" type="text/css" href="http://map.mefodiy-kirill-hram.ru/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="http://map.mefodiy-kirill-hram.ru/css/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="http://map.mefodiy-kirill-hram.ru/css/style.css" />
<script type="text/javascript" src="http://map.mefodiy-kirill-hram.ru/js/jquery.js"></script>
<script type="text/javascript" src="http://map.mefodiy-kirill-hram.ru/js/jquery-migrate-3.0.0.js"></script>
<script type="text/javascript" src="http://map.mefodiy-kirill-hram.ru/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://map.mefodiy-kirill-hram.ru/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://map.mefodiy-kirill-hram.ru/js/localization.jquery-ui.js"></script>
<script type="text/javascript" src="http://map.mefodiy-kirill-hram.ru/js/jquery.elevateZoom-3.0.8.min.js"></script>

<script type="text/javascript">
var _tmr = window._tmr || (window._tmr = []);
_tmr.push({id: "2936940", type: "pageView", start: (new Date()).getTime()});
(function (d, w, id) {
if (d.getElementById(id)) return;
var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async = true; ts.id = id;
ts.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//top-fwz1.mail.ru/js/code.js";
var f = function () {var s = d.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ts, s);};
if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); }
})(document, window, "topmailru-code");
</script>

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
</head>
<body class="map-body">
<script type="text/javascript">
ymaps.ready(init);
var myMap;
function init(){
myMap = new ymaps.Map("map", {
center: [51.5848,46.00],
zoom: 7,
type: 'yandex#hybrid'
});
myMap.controls.remove('typeSelector');
myMap.controls.remove('searchControl');
myMap.controls.remove('trafficControl');
myMap.controls.remove('FullscreenControl');
// Создаем ломаную с помощью вспомогательного класса Polyline.
var regionBorder = new ymaps.Polyline([
// Указываем координаты вершин ломаной.
ЗДЕСЬ КООРДИНАТЫ ГРАНИЦ РЕГИОНА. УДАЛИЛ, ИБО МНОГО ], {
// Описываем свойства геообъекта.
// Содержимое балуна.
balloonContent: "Саратовская область",
hintContent: "Саратовская область"
}, {
// Задаем опции геообъекта.
// Отключаем кнопку закрытия балуна.
balloonCloseButton: false,
// Цвет линии.
strokeColor: "#FF0000",
// Ширина линии.
strokeWidth: 4,
// Коэффициент прозрачности.
strokeOpacity: 0.5
});
myMap.geoObjects.add(regionBorder);
objectManager = new ymaps.ObjectManager({
// Чтобы метки начали кластеризоваться, выставляем опцию.
clusterize: true,
// ObjectManager принимает те же опции, что и кластеризатор.
gridSize: 32,
clusterDisableClickZoom: true
});
// Чтобы задать опции одиночным объектам и кластерам,
// обратимся к дочерним коллекциям ObjectManager.
//objectManager.objects.options.set('preset', 'islands#greenDotIcon');
//objectManager.clusters.options.set('preset', 'islands#greenClusterIcons');
myMap.geoObjects.add(objectManager);
$.ajax({
url: "ajax/get_map_data_json.php"
}).done(function(data) {
objectManager.add(data);
});
}
</script>
<div id="map"></div>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">

<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Меню</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a title="Интерактивная карта гонений на православную веру во время репрессий в СССР на территории саратовской митрополии" class="navbar-brand" href="/"><img src="img/geo-cross-icon-black-128x128.png" alt="Интерактивная карта гонений на православную веру во время репрессий в СССР на территории саратовской митрополии" title="Интерактивная карта гонений на православную веру во время репрессий в СССР на территории саратовской митрополии" style="float: left; margin-right: 5px;"/> Карта гонений</a>
</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">


<li><a title="Список храмов, с которыми связаны судьбы пострадавших за православную веру во время репрессий 1920-1930-х годов в СССР" href="placemark.php"><img src="img/church-icon-32x32.png" alt="Храмы" title="Список храмов, с которыми связаны судьбы пострадавших за православную веру во время репрессий 1920-1930-х годов в СССР" /><span>Храмы</span></a></li>
<li><a href="person.php" title="Список новомучеников и исповедников российских саратовской митрополии, пострадавших за православную веру во время репрессий 1920-1930-х годов в СССР"><img src="img/men-icon-32x32.png" alt="Храмы" title="Список новомучеников и исповедников российских саратовской митрополии, пострадавших за православную веру во время репрессий 1920-1930-х годов в СССР"/><span>Имена</span></a></li>
<li><a href="article.php" title="Статьи о новомучениках и исповедниках российских, связанных с храмами саратовской митрополии и пострадавших за православную веру во время репрессий 1920-1930-х годов в СССР. Статьи православного исторического общества ВОЗРОЖДЕНИЕ"><img src="img/articles-icon-32x32.png" alt="Статьи" title="Статьи о новомучениках и исповедниках российских, связанных с храмами саратовской митрополии и пострадавших за православную веру во время репрессий 1920-1930-х годов в СССР. Статьи православного исторического общества ВОЗРОЖДЕНИЕ"/><span>Статьи</span></a></li>
<li><a href="search.php" title="Поиск по сайту"><img src="img/search-icon-32x32.png" alt="Поиск по сайту" title="Поиск по сайту"/><span>Поиск</span></a></li>
<li><a href="about.php" title="О проекте, обратная связь"><img src="img/about-icon-32x32.png" alt="О проекте, обратная связь" title="О проекте, обратная связь"/><span>О проекте</span></a></li>
</ul>
</div>
</div>
</nav>
<script type="text/javascript">
$().ready(function(){
var thisUrl = document.location.href.split("/")[3].split("?");
$.each($('.navbar li a'),function(){
if ($(this).attr("href")==thisUrl[0]){
$(".active").removeClass("active");
$(this).addClass("active");
}
});
});
</script>
<div class="mainpage">
<h1>За Христа пострадавшие</h1>
<h3>интерактивная карта гонений на территории Саратовской митрополии</h3>
</div>
</body>
</html>

musstudent

29 октября 2017, 13:19

http://map.mefodiy-kirill-hram.ru/ - можно посмотреть вживую.

серёга

30 октября 2017, 14:20

musstudent,

у меня ваш пример работает, данные отображаются. Проверял в Firefox и Chrome. В каком браузере, OS у вас не работает?

musstudent

31 октября 2017, 12:56

серёга,

Google Chrome Версия 61.0.3163.100, Win 10.

серёга

31 октября 2017, 13:20

musstudent,

В Google Chrome Версия 61.0.3163.100, Win 10 у меня тоже проблема не воспроизводится.

musstudent

31 октября 2017, 22:35

серёга,

ради работоспособности я убирал доктайп в проекте. Сейчас вставил его. Посмотрите еще раз, пожалуйста. Проблема возникает в хроме (версию писал), FireFox (56.0 32bit), Opera (48.0), Edge. Оставлю в таком состоянии до завтрашнего утра. Иначе мне начнут писать гневные сообщения.

Willie Do

1 ноября 2017, 01:17

musstudent,

сейчас ссылка не открывается http://map.mefodiy-kirill-hram.ru

musstudent

1 ноября 2017, 11:12

Willie Do,

ссылка открывается. Вверху видно меню "Карта гонений", "Храмы", "Имена" и т.д. Внизу страницы слева черный полупрозрачный div с названием проекта. Ссылки в меню работают. На тех страницах карта работает, но там данные грузятся не по json.

Сейчас не работает карта на главной потому, что вставлен doctype. Посмотрите исходный код.

Willie Do

1 ноября 2017, 11:41

musstudent,

я вижу, что сейчас контейнер карты имеет нулевую высоту. Задайте ему размер и карта появится.
<div id="map" style="height: 512px; width: 512px;"></div>

musstudent

1 ноября 2017, 23:19

Willie Do,

пробовал. В дочернем контейнере ymaps указано class="ymaps-2-1-56-map" style="width: 1366px; height: 0px;"
Т.е. у меня мой контейнер id="map" нормальных размеров. Созданный при загрузке API оказывается высотой 0px.

<div id="map"><ymaps class="ymaps-2-1-56-map" style="width: 1366px; height: 0px;"><ymaps class="ymaps-2-1-56-map ymaps-2-1-56-i-ua_js_yes ymaps-2-1-56-map-bg-ru ymaps-2-1-56-islets_map-lang-ru" style="width: 1366px; height: 0px;">

и т.д.

Willie Do

2 ноября 2017, 11:57

musstudent,

я смотрю на контейнер в который загружается карта с id="map" и у него высота равна 0 хоть вы и задали ему высоту 100%. Т.к. высота 100% берётся от тэга <body>, а у него высота тоже 0. А тэг <body> будет брать высоту от тэга <html>, а у него высота тоже 0. Добавьте такой стиль чтобы увидеть карту.
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style> При этом верхняя часть карты у вас будет закрыта вашей панелью с кнопками, с ней, я думаю, вы сможете разобраться.