javascript - jQuery Mobile won't load OpenLayers Map -


i'm starting jquerymobile , wanted display map using openlayers. i'm having weird issue. here working code. sorry couldn't make fiddle, can test copy/paste on notepad or whatever.

<!doctype html> <html> <head>  <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <script src="http://www.openlayers.org/api/openlayers.js"></script>   <style type="text/css">   html ,body {     margin: 0;     padding: 0;     height: 100%; } .ui-content {    padding: 0; }  #pageone, #pageone .ui-content, #basicmap {    width: 100%;    height: 100%; } </style> </head> <body>   <div data-role="page" id="pageone">   <div data-role="main" class="ui-content">     <div id="basicmap"></div>   </div> </div>   <script>       function init() { map = new openlayers.map("basicmap", {     controls: [                new openlayers.control.navigation(),                new openlayers.control.argparser(),                new openlayers.control.attribution()            ]        }); var mapnik         = new openlayers.layer.osm(); var fromprojection = new openlayers.projection("epsg:4326");   // transform wgs 1984 var toprojection   = new openlayers.projection("epsg:900913"); // spherical mercator projection var position       = new openlayers.lonlat(7.55785346031189,50.3625329673905).transform( fromprojection, toprojection); var zoom           = 3;  map.addlayer(mapnik); map.setcenter(position, zoom );  var markers = new openlayers.layer.markers( "markers" ); map.addlayer(markers);  var marker = new openlayers.marker(position);  marker.events.register("click", map , function(e){ alert("click"); });  markers.addmarker(marker); }     $(document).on("pagecreate","#pageone",init());  </script>  </body> </html> 

this code doesn't show map.

now if take off following line :

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 

you can see map showing.

any idea on how can solve ? because think can solved can't see how.

thank you.

i knew stupid, if can interest , css should :

#pageone, #pageone .ui-content, #basicmap {    width: 100%;    height: 100%;    display : block; } 

and call js :

$(document).ready(init()); 

don't know why works.


Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -