google maps not displayed correctly unless refreshing

Question

I am using JQuery mobile with the Google Map API. The map is not displayed properly unless I refresh the page and I don\'t understand why.

here is my map.html file:<

Answer 1

There's a trick how google maps v3 framework can be easily implemented with jQuery Mobile.

Lets talk about the problems here. your content div has a height and width problem, mainly because only time page dimensions can be calculated correctly is during the pageshow event. But even then content div will not cover full page.

Your problem can be solved with a little bit of CSS :

#content {
    padding: 0 !important;
    position : absolute !important; 
    top : 40px !important;  
    right : 0 !important; 
    left : 0 !important;     
    height: 200px !important;
}

Basically you are forcing your content to cover available space.

Working example: http://jsfiddle.net/RFNPt/2/

Final solution :

index.html

    
        
        
              
        
         
         
        
    
     
        
 
            

                

                    Map
                
 
            
 
        
 
     

map.html

If you take a look at this ARTICLE you will find much more information regarding this topic plus examples.