javascript - Can't display Google map with jqTouch and PhoneGap -
i'm fighting issue long time , can't find proper solution. goal display google map in app. i'm developing app jqtouch , phonegap framework. here code:
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <!-- include cordova --> <script type="text/javascript" src="cordova-2.4.0.js"></script> <!-- include remote debugging --> <script src="http://debug.phonegap.com/target/target-script-min.js#photogap"></script>" <!-- include jqtouch --> <link rel="stylesheet" href="./js/jqtouch-1.0-b4-rc/themes/css/jqtouch.css" id="jqtcss" /> <link rel="stylesheet" href="./css/index.css" /> <script type="text/javascript" src="./js/jqtouch-1.0-b4-rc/src/lib/zepto.min.js" charset="utf-8"></script> <script type="text/javascript" src="./js/jqtouch-1.0-b4-rc/src/jqtouch.min.js" charset="utf-8"></script> <!-- include google map --> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=aizasybyqhq9ccaxtkjbi2xeyp_hqqjwdl3yzro&sensor=true"> </script> <script type="text/javascript"> // inicializuj jqtouch $.jqtouch({ icon: 'jqtouch.png', statusbar: 'black-translucent', preloadimages: [] }); </script> </head> <body> <div id="home" class="current"> <div class="toolbar"> <h1>orionids</h1> </div> <ul class="rounded"> <li class="arrow"><a href="#my_spots">my spots</a></li> <li class="arrow"><a href="#map">view on map</a></li> <li class="arrow"><a href="#" onclick="choosephoto(picturesource.photolibrary)">choose library</a></li> </ul> <div id="spot_btn"> <a href="#" class="redbutton" onclick="takephoto()">spot now!</a> </div> <p id="quote">„make wish…“</p> </div> <div id="map"> <div class="toolbar"> <h1>map view</h1> <a class="back" href="#">home</a> </div> <div id="map_canvas" style="width:100%; height:100%"></div> <script> // incializuj google mapy function initialize() { var mapoptions = { center: new google.maps.latlng(-34.397, 150.644), zoom: 8, maptypeid: google.maps.maptypeid.roadmap }; var map = new google.maps.map(document.getelementbyid("map_canvas"), mapoptions); } $('#map').bind('pageanimationend', function() { initialize(); }); </script> </div> </body> </html> the problem map won't display no matter i'm trying. tried every hint found here on stack overflow no luck far. help appreciated.
you need set height of container div in px instead of %
<div id="map_canvas" style="width:100%; height:100px"></div> try , map show up. create sure initialize method beingness called.
javascript jquery google-maps cordova jqtouch
No comments:
Post a Comment