google maps in jquery mobile

Question

When showing a google map in jquery mobile it appears (after reading the forums) that code like the following is required:

Answer 1

Well here how I did it and it worked for me.

 
        Options
        
Location
    

    


    

        
Copyright © 2011.
 
    

Then add these to your CSS File.

.classHeader{
height:10% !important;
}

.classFooter{
height:10% !important;
}

#map_canvas{
padding-top:10%;
padding-bottom:10%;
height:auto;
position:absolute;
width:100%;
height:88%;
max-height:1600px;
overflow:hidden;
display:block;
}

This is working perfectly for me.