Map view is not loading with PhoneGap

Question

I am developing an iPhone application using PhoneGap and jQueryMobile, in my application I have two html pages, first is index.html page and second is mapView.html, now, my

Answer 1

The $.mobile.changePage uses the jQuery Mobile AJAX functionality. jQuery Mobile loads only the code which is inside the first data-role="page" element in the DOM.

As stated in the jQuery Mobile docs , in jQuery Mobile, AJAX is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler $(document).ready() only executes for the first page.

Below you can find a working example which includes two pages, the navigation is performed through Ajax and the map is loaded inside the second page:

Also note that you can perform a transition using rel="external" or data-ajax="false". The usage of these attributes will cause a full page refresh without animated transition.

Working Example:

Instructions:

• Create a folder
• Create a file with name maps.js inside the folder
• Create a file with name map-intro.html inside the folder
• Create a file with name map.html inside the folder
• Fill each one of the created files with the corresponding code which can be found below

Add the below code inside the maps.js:

function initialize() {
    var mapCenter = new google.maps.LatLng(59.3426606750, 18.0736160278),
    myOptions = {
        zoom:10,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: mapCenter
    },
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

$( document ).on( 'pageshow', '#map-page',function(event){
  initialize();
});

$( document ).on( 'click', '#map-anchor', function(event){
  event.preventDefault();
  $.mobile.changePage( "map.html", { transition: "flip" } );
});

Add the below code inside the map-intro.html:

   
        
        
        
        
        
        
    
    
        

            

                
Map Example
            
            
   
                

                    
Go to Map
                
            
        
    

Add the below code inside the map.html:

 
 
     
        
        
        
        
    
    
        
        

            
            

                
Map
                Back
            
            
            

                

            
        
    

I hope this helps.