Question

Im trying to develop an application that should show a map using the Google Maps API. But i cant get it to work with the latest Release Candidate.
I got This cot working with an older version though.
I put it int this jsFiddle so you can see it live.
http://jsfiddle.net/huqY3/

Thanks in advance

Answer 1

Your #map_canvas and its div parent have a 0px height. So your Google Map loads, but is shown in an invisible container.

I think JqueryMobile overrides your inline CSS styles.

To fix this, you can simply set manually the height of #map_canvas after the pagecreate event. Either a fixed height (ie 500px), or a computed one (take the height of the document and subtract the header height.)

e.g :

$('.page-map').live("pagecreate", function() 
{
   var docH =  $('body').height();
   var headH=  $('body > div:eq(1)').height();
   $('#map_canvas').height(docH-headH);

   initialize();
});

Maybe that’s not the best way, but it’s difficult to tell without knowing about your project.