No, I didn't try it - I don't usually copy and paste HTML from posts to try
them out. Generally when you post HTML in a page instead of a link to a
testable page, you'll get wild guesses like mine.
But tell you what, I went ahead and saved a local copy and tried it in
Chrome on the desktop. The map does display OK here, although I notice a
few other problems:
1) 100% is the wrong height for the map_canvas. It doesn't take into
account the height of the top bar. Instead, you should definitely use
JavaScript to set the height and get rid of the 100% height in CSS.
Something like this:
var $map = $('#map_canvas');
$map.height( $(window).height() - $map.offset().top );
2) You are using ancient versions of jQuery and jQuery Mobile - and an
alpha version of Mobile at that. Current versions are 1.7.2 and 1.1.
3) The .live() method is obsolete and deprecated (it was a badly conceived
API). The only reason you're having to use it is that you have your jQuery
code in the header, before the .page-map div is created. Either move your
jQuery code to the end of the file, or put it inside a $(document).ready()
callback. Then you can use .bind() or .on() instead of .live().
-Mike
On Sun, May 27, 2012 at 4:56 PM, James Ward <[email protected]> wrote:
> 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.
>
>
--
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.
