jquery google maps api v3 load issue

jquery google maps api v3 load issue

Ok so this i my first attempt at a mobile app and im having an issue with my google maps.
I am using dreamweaver cs6 with phonegap build service to compile my app my coding is as follows

  2. <!DOCTYPE html> 
  3. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <title>jQuery Mobile Web App</title><link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
  7. <style type="text/css">
  8. h1,h2,h3,h4,h5,h6 {
  9. font-family: cursive, fantasy;
  10. color: #996600;
  11. border-top-color: #000;
  12. border-right-color: #000;
  13. border-bottom-color: #000;
  14. border-left-color: #000;
  15. font-style: italic;
  16. font-size: xx-large;
  17. text-align: center;
  18. }
  19. </style>


  22. <link href="css/flexslider.css" rel="stylesheet" type="text/css">

  24. <script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>

  26. <script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>

  28. <script src="includes/jquery-1.4.2.js" type="text/javascript"></script>

  30. <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
  31. <script src="js/jquery.flexslider-min.js" type="text/javascript"></script>



  35. <script type="text/xml">
  36. <!--
  37. <oa:widgets>
  38.   <oa:widget wid="2827522" binding="#OAWidget" />
  39. </oa:widgets>
  40. -->
  41. </script>
  42. </head> 
  43. <body class="googlemap"> 

  45. <div id="page" data-role="page" data-theme="a">
  46. <div data-role="content">
  47. <h1><img src="jquery-mobile/AQUAE SULIS LOGO.jpg" alt="AQUAE SULIS" width="369" height="188" class="ui-header">
  48.    </h1>
  49. </div>
  50.   <div data-role="content">
  51.     <div data-role="controlgroup" data-type="vertical">
  52.         
  53.         <div data-role="controlgroup">
  54.         
  55.         <a href=#page2 data-icon="forward" data-role="button" data-theme="a"><font color=#996600>Menu</font color></a>
  56.         
  57.         <a href="https://app.secure-booker.com/Mobile/aquaesulis?" class="flip" data-icon="forward" data-role="button"><font color=#996600>Book Appointment</font color></a>
  58.         
  59.         <a href="#page4" data-icon="forward" data-role="button"><font color=#996600>Directions</font color></a>
  60.         </div>
  61.  </div>
  62.     <a href="http://facebook.com/aquaesulissalonandspa"><center><img src="images/Facebook.jpg" width="51" height="50"></center></a>  
  63.   </div>

  65. <div data-role="footer" data-theme="a">
  66.     
  67. <h4><center>(435) 767-8323         </center></h4>
  68. </div>
  69. </div>

  71. <div data-role="page" id="page2">
  72. <div data-role="header">
  73. <h1>Menu</h1>
  74. </div>
  75. <div data-role="content">
  76.  <script type="text/javascript">
  77. // BeginOAWidget_Instance_2827522: #OAWidget
  78. $(window).load(function() {
  79.       $('.flexslider').flexslider({
  80.       animation: "fade",
  81.       controlsContainer: ".flex-container", //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. If the given element is not found, the default action will be taken.  
  82.       slideDirection: "horizontal",   //String: Select the sliding direction, 'horizontal' or 'vertical'
  83.       slideshow: false,                //Boolean: Animate slider automatically
  84.       slideshowSpeed: 5000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
  85.       animationDuration: 550,         //Integer: Set the speed of animations, in milliseconds
  86.       directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
  87.       controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
  88.       keyboardNav: true,              //Boolean: Allow slider navigating via keyboard left/right keys
  89.       mousewheel: false,              //Boolean: Allow slider navigating via mousewheel
  90.       prevText: "Previous",           //String: Set the text for the "previous" directionNav item
  91.       nextText: "Next",               //String: Set the text for the "next" directionNav item
  92.       pausePlay: false,               //Boolean: Create pause/play dynamic element
  93.       pauseText: "Pause",             //String: Set the text for the "pause" pausePlay item
  94.       playText: "Play",               //String: Set the text for the "play" pausePlay item
  95.       randomize: false,               //Boolean: Randomize slide order
  96.       slideToStart: 0,                //Integer: The slide that the slider should start on. Array notation (0 = first slide)
  97.       animationLoop: false,            //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
  98.       pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
  99.       pauseOnHover: true,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering     
  100.       manualControls: "",             //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
  101.       start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
  102.       before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
  103.       after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
  104.       end: function(){}               //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
  105.       
  106.       });
  107.       });
  108. // EndOAWidget_Instance_2827522
  109.         </script>
  110.        
  111.           <!--=============================
  112.       Markup for FADE animation
  113.       =================================-->
  114.           <div class="flex-container">
  115.             <div class="flexslider">
  116.               <ul class="slides">
  117.                 <li> <img src="Salon Menu Page One.jpg" />
  118.                 </li>
  119.                 <li><img src="IMG_4356.JPG" /></a>
  120.                 </li>
  121.                 <li> <img src="IMG_4356a.jpg" /> </li>
  122.                 <li> <img src="IMG_4356b.jpg" /> </li>
  123.               </ul>
  124.             </div>
  125.       </div>
  126.   </div>
  127. </div>
  128. <div data-role="footer">
  129. <h4>Page Footer</h4>
  130. </div>
  131. </div>

  133. </div>

  135. <div data-role="page" id="page4">
  136. <div data-role="header">
  137.  <h1>Directions</h1>
  138. </div>
  139.  
  140. <!DOCTYPE html>
  141. <html>
  142. <head>
  143. <script
  144. src="http://maps.googleapis.com/maps/api/js?key= &sensor=true">
  145. </script>

  147. <script>
  148. var myCenter=new google.maps.LatLng(37.12516,-113.614678);

  150. function initialize()
  151. {
  152. var mapProp = {
  153.   center:myCenter,
  154.   zoom:15,
  155.   mapTypeId:google.maps.MapTypeId.ROADMAP
  156.   };

  158. var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

  160. var marker=new google.maps.Marker({
  161.   position:myCenter,
  162.   animation:google.maps.Animation.BOUNCE
  163.   });

  165. marker.setMap(map);

  167. var infowindow = new google.maps.InfoWindow({
  168.   content:"Aquae Sulis Salon And Spa <br> 992 n. Westridge Dr. Saint George,UT 84770"
  169.   });

  171. google.maps.event.addListener(marker, 'click', function() {
  172.   infowindow.open(map,marker);
  173.   });
  174. }
  175.   


  178. google.maps.event.addDomListener(window, 'load', initialize);
  179. </script>

  181. <body>
  182. <div id="googleMap" style="width: ; height: 300px; resize: both;"></div>
  183. </body>
  184. </html>


  187. <div data-role="footer">
  188. <h4><center>(435) 767-8323 </h4>
  189. </div></center>
  190. </div>

  192. </body>
  193. </html>

now my problem is that when i build the app and test on droid the map only loads about 1/4 of the map and stops?

if I switch to landscape view the map loads fully and i can go back to portrait view still with a full map

it does not have this problem when I view the app in live view on dreamweaver though. what is happening?