Javascript-форум - Как вставить карту в JQuery Modile?

Доброго времени суток.
<!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 всё отображается. А с ней не хочет. Почему?