Can Not Get Multiple Page Jquery Mobile Working With Google Maps
I have jQuery mobile working with google maps so that I can display one, stand alone page with a map that takes up the full screen. However, I can't figure out how to make a simpl
Solution 1:
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.
jQuery Mobile loads just the code which is inside the first data-role="page" element in the DOM. Therefore in case the navigation is performed through AJAX then the scripts on your second page are not loaded.
You may find below two sample examples of Google Maps in jQuery Mobile.
The first example is a multipage example.
the second example includes two pages, the navigation is performed through Ajax and the map is loaded inside the second page.
Example 1:
<!DOCTYPE html><html><head><title>Map Example Multiple Pages</title><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8" /><title>jQuery mobile with Google maps</title><metacontent="en"http-equiv="content-language"><linkhref="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /><scriptsrc="http://code.jquery.com/jquery-1.8.2.min.js"></script><scriptsrc="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script><scripttype="text/javascript"src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script><script>functioninitialize() {
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><divdata-role="page"id="home-page"><!-- /header --><divdata-role="header"><h1>Maps</h1></div><!-- /content --><divdata-role="content"><ahref="#map-page"data-role="button"data-transition="fade">Click to see the Map</a></div></div><!-- /page --><divdata-role="page"id="map-page"><!-- /header --><divdata-role="header"><h1>Map</h1><ahref="#home-page"data-icon="home">Home</a></div><!-- /content --><divdata-role="content"class="ui-bar-c ui-corner-all ui-shadow"style="padding:1em;"><divid="map_canvas"style="height:300px;"></div></div></div></body></html>Example 2:
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:
functioninitialize() {
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:
<!doctype html><htmllang="en"><head><title>Map Intro Page</title><linkhref="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /><scriptsrc="http://code.jquery.com/jquery-1.8.2.min.js"></script><scriptsrc="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script><scripttype="text/javascript"src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script><scriptsrc="./maps.js"></script></head><body><divid="map-intro-page"data-role="page"><divdata-role="header"><h1><adata-ajax="false"href="/">Map Example</a></h1></div><divdata-role="content"><uldata-role="listview"id="my-list"><li><ahref="#"id="map-anchor">Go to Map</a></li></ul></div></div></body></html>Add the below code inside the map.html:
<!DOCTYPE html><html><head><title>jQuery mobile with Google maps geo directions example</title><linkhref="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /><scriptsrc="http://code.jquery.com/jquery-1.8.2.min.js"></script><scriptsrc="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script></head><body><!-- /page --><divdata-role="page"id="map-page"><!-- /header --><divdata-role="header"><h1>Map</h1><adata->Back</a></div><!-- /content --><divdata-role="content"class="ui-bar-c ui-corner-all ui-shadow"style="padding:1em;"><divid="map_canvas"style="height:300px;"></div></div></div></body></html>I hope this helps.
Post a Comment for "Can Not Get Multiple Page Jquery Mobile Working With Google Maps"