still same. Did it work on your system?
On Sun, May 27, 2012 at 5:47 PM, Michael Geary <[email protected]> wrote: > I'll bet your map_canvas div is not getting the height you expect. Have you > checked its actual height? > > You may be able to fix it by adding these styles: > > html { height: 100%; } > body { height: 100%; } > > Or a certain fix is to set the height explicitly in JS, e.g. > > $('#map_canvas').height( $(window).height() ); > > More about height:100%: > > https://www.google.com/search?q=css+height+100% > > -Mike > > On Sun, May 27, 2012 at 3:10 PM, James Ward <[email protected]> wrote: >> >> Hi I am trying to add google map on a JQM page but it does not render >> properly. >> I only can see partial map not the whole map. Can some one please let me >> know >> how to resolve this issue. Here is the code. Thanks in advance. >> >> >> <!DOCTYPE HTML> >> <html lang="en-US"> >> <head> >> <meta charset="UTF-8"> >> <title>Main Page</title> >> <link rel="stylesheet" >> href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"; >> /> >> <script src="http://code.jquery.com/jquery-1.4.3.min.js";></script> >> <script >> src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js";></script> >> <script type="text/javascript" >> src="http://maps.google.com/maps/api/js?sensor=false";></script> >> <script type="text/javascript"> >> // When map page opens get location and display map >> $('.page-map').live("pagecreate", function() { >> if(navigator.geolocation) { >> >> navigator.geolocation.getCurrentPosition(function(position){ >> >> initialize(position.coords.latitude,position.coords.longitude); >> }); >> } >> }); >> function initialize(lat,lng) { >> var latlng = new google.maps.LatLng(lat, lng); >> var myOptions = { >> zoom: 8, >> center: latlng, >> mapTypeId: google.maps.MapTypeId.ROADMAP >> }; >> var map = new >> google.maps.Map(document.getElementById("map_canvas"),myOptions); >> } >> </script> >> </head> >> <body> >> <div data-role="page"> >> <div data-role="header"><h1>Main Page</h1></div> >> <div data-role="content"> >> <p><a href="#mapPage">Map</a></p> >> </div> >> </div> >> >> <div data-role="page" data-theme="b" class="page-map" >> style="width:100%; height:100%;" id="mapPage"> >> <div data-role="header"><h1>Map Page</h1></div> >> <div data-role="content" style="width:100%; height:100%; >> padding:0;"> >> <div id="map_canvas" style="width:100%; >> height:100%;"></div> >> </div> >> </div> >> </body> >> </html> >> >> -- >> You received this message because you are subscribed to the Google Groups >> "Google Maps JavaScript API v3" group. >> To post to this group, send email to >> [email protected]. >> To unsubscribe from this group, send email to >> [email protected]. >> For more options, visit this group at >> http://groups.google.com/group/google-maps-js-api-v3?hl=en. >> > > -- > You received this message because you are subscribed to the Google Groups > "Google Maps JavaScript API v3" group. > To post to this group, send email to [email protected]. > To unsubscribe from this group, send email to > [email protected]. > For more options, visit this group at > http://groups.google.com/group/google-maps-js-api-v3?hl=en. -- You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
