On Iphone, when I load the page and change the orientation to landscape for the first time, google map doesn't take the entire vertical space.

On Iphone, when I load the page and change the orientation to landscape for the first time, google map doesn't take the entire vertical space.

On Iphone, when I load the page and change the orientation to landscape for the first time, google map doesn't take the entire vertical space.

I am using google map api version 3, jquery mobile 1.3.1 and jquery 1.8.3

I use this viewport meta tag:
  1. <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no" /> 

This is the code in general:
  1. <div data-role="page" id="mapPage">
  2. <div class="ui-grid-solo">
  3. <div class="ui-block-a">
  4. <div style="height:100%;width:100%;">
  5. <a href="#popupPanel" data-mini="true" data-rel="popup" data-transition="none" data-pushStateEnabled="false">
  6. <div id="optionsBtn" class="optionsBtn"></div>
  7. </a>
  8. </div>
  9. <div data-role="none" id="popupPanel" style="z-index:+99; height:100% !important;">
  10. (...)
  11. </div>
  12. <div class="listViewContainer" id="listViewContainer" style="height: 100% !important;">
  13. (...)
  14. </div>
  15. <div style="clear:both;"></div>
  16. </div>
  17. </div>
  18. <div id="map_canvas"></div>
  19. </div>
I don't understand why the map doesn't occupy the entire viewport at all times.

Any help would be appreciated.