Search jQuery

jQuery Forum

Screen name:
anarchydriftinc

anarchydriftinc's Profile

1 Posts

0 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

jquery google maps api v3 load issue
[0Replies]
- 05-Nov-2012 03:31 PM
- Forum: jQuery Mobile
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. 
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">
53. <div data-role="controlgroup">
55. <a href=#page2 data-icon="forward" data-role="button" data-theme="a"><font color=#996600>Menu</font color></a>
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>
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">
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)
106. });
107. });
108. // EndOAWidget_Instance_2827522
109. </script>
111. 
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>
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. }
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?

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend