As stated in jQuery Mobile docs , in jQuery Mobile AJAX is used to load the contents of each page into the DOM when navigating, and the finished DOM handler $(document).ready() is executed only for the first page.
jQuery Mobile only loads code that is inside the first data-role = "page" element in the DOM. Therefore, if navigation is performed through AJAX, then the scripts on your second page are not loaded.
Below you can find two examples of Google Maps in jQuery Mobile.
The first example is a multi-page example.
the second example includes two pages, navigation is via Ajax, and the map is loaded inside the second page.
Example 1:
<!DOCTYPE html> <html> <head> <title>Map Example Multiple Pages</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jQuery mobile with Google maps</title> <meta content="en" http-equiv="content-language"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script> <script> 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("pageinit", "#map-page", function() { initialize(); }); </script> </head> <body> <div data-role="page" id="home-page"> <!-- /header --> <div data-role="header"> <h1>Maps</h1> </div> <!-- /content --> <div data-role="content"> <a href="#map-page" data-role="button" data-transition="fade">Click to see the Map</a> </div> </div> <!-- /page --> <div data-role="page" id="map-page"> <!-- /header --> <div data-role="header"> <h1>Map</h1> <a href="#home-page" data-icon="home">Home</a> </div> <!-- /content --> <div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"> <div id="map_canvas" style="height:300px;"></div> </div> </div> </body> </html>
Example 2:
Instruction:
- Create a folder
- Create a file called maps.js inside the folder
- Create a file called map-intro.html inside the folder
- Create a file called map.html inside the folder
- Fill each of the created files with the appropriate code, which can be found below
Add the code below inside 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 code below inside map-intro.html:
<!doctype html> <html lang="en"> <head> <title>Map Intro Page</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script> <script src="./maps.js"></script> </head> <body> <div id="map-intro-page" data-role="page"> <div data-role="header"> <h1><a data-ajax="false" href="/">Map Example</a></h1> </div> <div data-role="content"> <ul data-role="listview" id="my-list"> <li><a href="#" id="map-anchor">Go to Map</a></li> </ul> </div> </div> </body> </html>
Add the code below inside map.html:
<!DOCTYPE html> <html> <head> <title>jQuery mobile with Google maps geo directions example</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> </head> <body> <!-- /page --> <div data-role="page" id="map-page"> <!-- /header --> <div data-role="header"> <h1>Map</h1> <a data-rel="back">Back</a> </div> <!-- /content --> <div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"> <div id="map_canvas" style="height:300px;"></div> </div> </div> </body> </html>
Hope this helps.