Доброго времени суток.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<!-- Необходимо для того, чтобы страница отображалась в 100% масштабе.-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<!-- Подключаем различный таблицы стилей. Выбор подключаемой таблицы зависит от расширерения экрана. -->
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 800px)" href="kub_pc.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 799px)" href="kub_mobile.css" />
<!-- Подключаем JQuery, JQuery Mobile и JQuery Mobile CSS -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<link rel="stylesheet" href="css/themes/mJQuery.css" />
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
<!-- Подключаем leaflet JS и leaflet CSS, для отображения карты -->
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
</head>
<body>
<div data-role="page">
<!-- header -->
<div data-role="header">
</div>
<!-- /header -->
<!-- content -->
<div data-role="content">
<div id="map">
<style>
#map{
width: 100%;
height: 100%;
position:relative;
top:0px;
}
#adm_hatun{
margin:0;
padding:0;
width: 300px;
height: 100px;
}
#adm_hatun i{
font: 10px Arial;
}
#church{}
#school{}
#circle{}
</style>
<script>
var MAP = new L.map('map',
{
center: [55.00568744289998,37.83303327379225],
zoom: 13,
zoomControl: false,
attributionControl: false,
scrollWheelZoom: false
});// Создали объект карта с параметрами
var OSMLayer = new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',
{
attribution:''
}
); // Создали объект слоя OSM
var adm_hatun = new L.marker([55.00568744289998,37.83303327379225]).addTo(MAP);
var church = new L.marker([55.00629042601082,37.83461041269301]).addTo(MAP);
var school = new L.marker([55.00896067082531,37.83561892328261]).addTo(MAP);
var circle = L.circle([55.002115505025856,37.83243245897292], 50, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(MAP);
adm_hatun.bindPopup('<div id="adm_hatun"><table><tr><td><i>Администрация - Сельское поселение Семёновское</i></td><td></td></tr></table></div>');
church.bindPopup('<div id="adm_hatun"><table><tr><td><i>Церковь Рождества Пресвятой Богородицы</i></td><td><img src="cherch.jpeg" /></td></tr></table></div>');
school.bindPopup("Школа");
circle.bindPopup("Торговая площадь");
var zoom = L.control.zoom({
position: 'topright',
zoomInText: '+',
zoomOutText: '-',
zoomInTitle: 'Увеличить',
zoomOutTitle: 'Уменьшить'
}).addTo(MAP);
var scale = L.control.scale({
position: 'bottomleft',
metric: true,
imperial: false
}).addTo(MAP);
MAP.addLayer(OSMLayer);
</script>
</div>
</div>
<!-- /content -->
<!-- footer -->
<div data-role="footer">
<h4>Page Footer</h4>
</div>
<!-- /footer -->
</div>
<!-- /page -->
</body>
</html>
В без данного API всё отображается. А с ней не хочет. Почему?
