jquery mobile + google maps / wrong height -
alas following code it's doesn't work - bit of map visible, @ header. maybe can help?
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>map 2.0</title> <link rel="stylesheet" href="http://code.jquery.com/mobile /1.0/jquery.mobile-1.0.min.css" /> <link type="text/css" href="css/style.css" rel="stylesheet" media="all" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <script type="text/javascript" src="js/map.js"></script> </head> <body> <div data-role="page" id="map_page"> <div data-role="header"> <h1> map </h1> </div> <div data-role="content" id="map_canvas"> </div> </div> </body> </html> js:
$("#map_page").live("pageinit", function() { var myoptions = { center: new google.maps.latlng(-34.397, 150.644), zoom: 8, maptypeid: google.maps.maptypeid.roadmap }; map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions); }) css:
html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } greets
@omar: tried modify code suggestions, still doesn't work. maybe overlooked something?
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>map 2.0</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <link type="text/css" href="css/style.css" rel="stylesheet" media="all" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="js/map.js"></script> </head> <body> <div data-role="page" id="map_page"> <div data-role="header"> <h1> map </h1> </div> <div data-role="content"> <div id="map_canvas"></div> </div> </div> </body> </html> js:
$("#map_page").on("pageshow", function() { var myoptions = { center: new google.maps.latlng(-34.397, 150.644), zoom: 8, maptypeid: google.maps.maptypeid.roadmap }; map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions); }) css:
html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } greets germany & morocco
here's working example: http://jsfiddle.net/gajotres/7kgde/
map page must initialized during pageshow event because @ point correct height can b e calculated.
also use of function necessary:
function getrealcontentheight() { var header = $.mobile.activepage.find("div[data-role='header']:visible"); var footer = $.mobile.activepage.find("div[data-role='footer']:visible"); var content = $.mobile.activepage.find("div[data-role='content']:visible:visible"); var viewport_height = $(window).height(); var content_height = viewport_height - header.outerheight() - footer.outerheight(); if((content.outerheight() - header.outerheight() - footer.outerheight()) <= viewport_height) { content_height -= (content.outerheight() - content.height()); } return content_height; } it used set correct content height according available height, header , footer height. if take @ article find more information few examples.
Comments
Post a Comment