<!-- jQuery Mobile Geolocation Single Page Example --> <!-- from: http://stackoverflow.com/questions/12051911/can-not-get-multiple-page-jquery-mobile-working-with-google-maps --> <!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).ready(function(){ initialize(); }); </script> </head> <body> <!-- /page --> <div data-role="page" id="map-page"> <!-- /header --> <div data-role="header"> <h1>Map</h1> </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>