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.
