Geek asks and answers

The Google map goes beyond the page when it is embedded in the jQuery Mobile "page",

I have a small matching application I'm working on and embeds a Google map on the jQuery Mobile page. I want the map to occupy the entire horizontal width of the screen, but no more. The problem I am experiencing is that the map is “overflowing” from the edge of the page on the right side, possibly by 5%. This can be seen at http://www.codeemporium.com/experiments/map6.html (sorry, it doesn’t show up in Firefox yet), where you will notice that in the lower right corner where the map usually says "Terms of Use", it was cut off . The HTML code excerpt for the jQuery Mobile main page that I use is as follows (as seen from the page source code above): `

<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>

`

div map_canvas. Chrome , , 1295 , , 1280 .. , , , , , , , . , - , - , .

+3
1

, :

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)});

resizeMap() $(document).ready() .

+4

More articles:


All Articles