Google Map extends off edge of page when embedded inside jQuery Mobile “page”

Question

I have a small mapping application I'm working on that embeds a Google Map inside of a jQuery Mobile "page". I want the map to take up the full horizontal width of the screen, but no more. The problem I am having is that the map "overflows" off the edge of the page on the right hand side, by maybe 5%-ish. This can be seen at http://www.codeemporium.com/experiments/map6.html (sorry, won't show in Firefox just yet) where you will notice that in the bottom right hand corner where the map normally says "Terms of Use", it has been cut off. The HTML code excerpt for the main jQuery Mobile "page" I'm using is as follows (as can be seen in the aforementioned page's source code):`

<div data-role="page" style="width:100%; height:100%;" id="main_page"> 


<div data-role="content" id="map_canvas" style="width:100%;height:80%;">  
</div> 

<div data-role="footer" style="width:100%;height:20%;"> 
  <div data-role="navbar"> 
<ul> 
  <li><a href="#welcome" data-icon="info" data-iconpos="notext"></a></li> 
  <li><a href="#settings" data-icon="gear" data-iconpos="notext"></a></li> 
  <li><a href="#tracking" data-icon="alert" data-iconpos="notext"></a></li> 
      <li><a href="#search" data-icon="search" data-iconpos="notext"></a></li> 
</ul> 
  </div><!-- /navbar --> 
</div> 

`

The map is being injected into the map_canvas div. Using the Chrome developer on my machine I can see that the map canvas ends up being 1295 pixels wide, which is a tad larger than the 1280 pixel resolution of my screen minus scroll bar etcetera. The problem I am having is that I have very little experience in troubleshooting what I imagine here is a styling issue, and may not even pertain directly to the code snippet above. In addition to a specific solution to this problem, if someone could suggest how to go about debugging these kind of things in some kind of methodical manner, it would also be much appreciated.

Answer 1

When we ran into this issue we had to make this function:

function resizeMap () {
    $('#map_canvas').height($(window).height()-$('#map_head').height()); 
    // in your case #map_head would be .ui-navbar I believe
}
$(window).resize(function(){resizeMap(); map.setCenter(latlng)});

you can run resizeMap() in $(document).ready() or in your map initialization.