2

I tried tons of solutions, but none of them worked.

I have a layout with fixed header and footer (real fixed not disappearing), and I like to obtain the filling of the <div data-role="content"> with the map. I'm also looking to disable both vertical and horizontal scroll in this content div.

Solutions NOT working:
Google Map extends off edge of page when embedded inside jQuery Mobile "page"
google maps in jquery mobile
How to create div with 100% height with jquery mobile?
JQuery-Mobile content area 100% height between head and foot
Maximise div[data-role=content] in Jquery Mobile
How can I display a full screen google map with jQuery Mobile?

Community
  • 1
  • 1
Hamal000
  • 516
  • 1
  • 5
  • 25

1 Answers1

3

More than a year later, but if someone still want to solve this, here is how:

tested with jquery mobile 1.3.1 and Google Maps API v3

In HTML, use this for content:

<div data-role="content">
    <div id="mapDiv"></div>
</div>

TIP: Do not use data-fullscreen on any div of the page.

Than, in your CSS, use this:

#mapDiv {
    padding: 0;
    position : absolute !important; 
    top : 40px !important;  
    right : 0; 
    bottom : 58px !important;  
    left : 0 !important;     
}

Remember to create your map inside your mapDiv, so your JS would be like:

map = new google.maps.Map(document.getElementById('mapDiv'), mapOptions);

And that's it! It's going to work even when you rotate a device showing it.

TIP: You must use data-position="fixed" and data-tap-toggle="false" in your header and footer.

felipeh
  • 88
  • 10