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

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


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

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

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

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

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



  25. <script type="text/xml">
  26. <!--
  27. <oa:widgets>
  28.   <oa:widget wid="2827522" binding="#OAWidget" />
  29. </oa:widgets>
  30. -->
  31. </script>
  32. </head> 
  33. <body class="googlemap"> 

  34. <div id="page" data-role="page" data-theme="a">
  35. <div data-role="content">
  36. <h1><img src="jquery-mobile/AQUAE SULIS LOGO.jpg" alt="AQUAE SULIS" width="369" height="188" class="ui-header">
  37.    </h1>
  38. </div>
  39.   <div data-role="content">
  40.     <div data-role="controlgroup" data-type="vertical">
  41.         
  42.         <div data-role="controlgroup">
  43.         
  44.         <a href=#page2 data-icon="forward" data-role="button" data-theme="a"><font color=#996600>Menu</font color></a>
  45.         
  46.         <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>
  47.         
  48.         <a href="#page4" data-icon="forward" data-role="button"><font color=#996600>Directions</font color></a>
  49.         </div>
  50.  </div>
  51.     <a href="http://facebook.com/aquaesulissalonandspa"><center><img src="images/Facebook.jpg" width="51" height="50"></center></a>  
  52.   </div>

  53. <div data-role="footer" data-theme="a">
  54.     
  55. <h4><center>(435) 767-8323         </center></h4>
  56. </div>
  57. </div>

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

  119. </div>

  120. <div data-role="page" id="page4">
  121. <div data-role="header">
  122.  <h1>Directions</h1>
  123. </div>
  124.  
  125. <!DOCTYPE html>
  126. <html>
  127. <head>
  128. <script
  129. src="http://maps.googleapis.com/maps/api/js?key= &sensor=true">
  130. </script>

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

  133. function initialize()
  134. {
  135. var mapProp = {
  136.   center:myCenter,
  137.   zoom:15,
  138.   mapTypeId:google.maps.MapTypeId.ROADMAP
  139.   };

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

  141. var marker=new google.maps.Marker({
  142.   position:myCenter,
  143.   animation:google.maps.Animation.BOUNCE
  144.   });

  145. marker.setMap(map);

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

  149. google.maps.event.addListener(marker, 'click', function() {
  150.   infowindow.open(map,marker);
  151.   });
  152. }
  153.   


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

  156. <body>
  157. <div id="googleMap" style="width: ; height: 300px; resize: both;"></div>
  158. </body>
  159. </html>


  160. <div data-role="footer">
  161. <h4><center>(435) 767-8323 </h4>
  162. </div></center>
  163. </div>

  164. </body>
  165. </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?