Trouble displaying Google map in jquery mobile -
hello i'm trying create jquery mobile page has map specific coordinates , couple of collapsible items. got code map site (http://jsfiddle.net/gajotres/7kgde/) whenever seek screen goes blank. not want map take entire page. display on page along collapsible items. help appreciated. thanks
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <style> #content { padding: 0; position : absolute !important; top : 40px !important; right : 0; bottom : 40px !important; left : 0 !important; } </style> <body> <div data-role="page" id="index"> <div data-theme="a" data-role="header"> <h3>first page</h3> </div> <div data-role="content" id="content"> <div id="map_canvas" style="height:100%"></div> <div data-role="collapsibleset"> <div data-role="collapsible"> <h3>click me - i'm collapsible!</h3> <p>i'm expanded content.</p> </div> <div data-role="collapsible"> <h3>click me - i'm collapsible!</h3> <p>i'm expanded content.</p> </div> <div data-role="collapsible"> <h3>click me - i'm collapsible!</h3> <p>i'm expanded content.</p> </div> <div data-role="collapsible"> <h3>click me - i'm collapsible!</h3> <p>i'm expanded content.</p> </div> </div> </div> <div data-theme="a" data-role="footer" data-position="fixed"> <h3>first page</h3> </div> </div> </body> <script> $(document).on('pageinit', '#index',function(e,data){ var minzoomlevel = 10; var map = new google.maps.map(document.getelementbyid('map_canvas'), { zoom: minzoomlevel, center: new google.maps.latlng(38.50, -90.50), maptypeid: google.maps.maptypeid.roadmap }); }); </script> </html>
the code have provided should work no issues, however, have alter height of map_canvas , set static value. 100% won't occupy entire height, because parent div content height undefined. content div expands based on content within it.
#map_canvas { height: 200px; width: 100%; } another note, should utilize pagecreate instead of deprecated event pageginit.
demo
google-maps jquery-mobile
No comments:
Post a Comment