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 simple 2 page example where I have a button that takes me to the map.

I'm very confused as to why there is javascript in the body tags on all of the examples. I've been trying to follow the examples here http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html , but it is very hard to figure out what is necessary just for the basic_map within all of the source HTML. I'm new to using jQuery and javascript.

Here is the HTML code that works as a stand alone page.

<!doctype html>
<html lang="en">
   <head>
        <title>Simple Map</title>
        <!--link type="text/css" rel="stylesheet" href="css/style.css" -->
    </head>
    <body>

        <div id="basic_map" data-role="page" class="page-map">
            <div data-role="content">   
                <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                    <div id="map_canvas" style="height:350px;"></div>
                </div>
            </div>
        </div>

        <script type="text/javascript"          
        src="http://maps.googleapis.com/maps/api/js?&sensor=true"></script> 
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
            <script type="text/javascript" src="./jquery-ui-map-3.0-rc/ui/jquery.ui.map.js"></script>
        <!--script type="text/javascript" src="./jquery-ui-map-3.0-rc/demos/js/demo.js"></script-->     
        <script type="text/javascript">
                $(function(){
                    initializeMap(37.6, -122.1);
                });

                function initializeMap(lat,lng) {
                    var adjustedHeight = ($(window).height());
                    $('#map_canvas').css({height:adjustedHeight});
                    //$("#map_canvas").height = $(window).height() - $("#header").height() - $("#footer").height();
                    setTimeout(function() {

                        var latlng = new google.maps.LatLng(lat, lng);
                        var myOptions = {
                                zoom: 9,
                            center: latlng,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        };

                        var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
                        google.maps.event.trigger(map, 'resize');
                        map.setZoom( map.getZoom() );
                    }, 500);
                }
        </script>
    </body>
</html>

I've tried implementing the following 2 screen example where I enter in the latitude and longitude on the first page, then I go to a map centered at that point on the next page. However, my map displays under the text boxes (not on a new page as desired) and I get the error:

Uncaught TypeError: Cannot call method 'changePage' of undefined

According to other posts that error has to do with me needing to call the pagecreate function instead of $(document).ready(). I'm not calling either of those functions because I didn't know if they were necessary since I was able to make other simple, multi page mobile web apps without having to wait for other pages to be ready or created.

My multiple screen code that produces the error is

<!doctype html>
<html lang="en">
<head>
    <title>Simple Map</title>
    <link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
    <script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?&sensor=true"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="./jquery-ui-map-3.0-rc/ui/jquery.ui.map.js"></script>
    <!--script type="text/javascript" src="./jquery-ui-map-3.0-rc/demos/js/demo.js"></script-->
    <script type="text/javascript">

    var lat;
    var lng;
    function plotPoint(){
        lat = document.getElementById("lat").value;
        lng = document.getElementById("lng").value;

        initializeMap(lat,lng);
        $.mobile.changePage("#basic_map", "pop");
    }

    function initializeMap(lat,lng) {
        var adjustedHeight = ($(window).height());
        $('#map_canvas').css({height:adjustedHeight});
        //$("#map_canvas").height = $(window).height() - $("#header").height() - $("#footer").height();
        setTimeout(function() {

            var latlng = new google.maps.LatLng(lat, lng);
            var myOptions = {
                zoom: 9,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
            google.maps.event.trigger(map, 'resize');
            map.setZoom( map.getZoom() );
            }, 500);
        }
        </script>
<!-- Main Page-->
<!-- Start of second page: #viewMap -->
<div data-role="page" id="main" data-theme="c">
    <div data-role="header">
        <h1>Main Page</h1>
    </div><!-- /header -->
    <div data-role="content" data-theme="c">
        <label for="lat">Latitude:</label>
        <input type="text" name="lat" id="lat" value="" />
        <label for="lng">Longitude:</label>
        <input type="text" name="lng" id="lng" value="" />
        <a href="#" data-role="button" data-theme="b" onclick="plotPoint()">Plot this point</a>
    </div><!-- /content -->
</div><!-- /viewMap page -->

<div id="basic_map" data-role="page">
    <div data-role="content">
        <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
            <div id="map_canvas" style="height:350px;"></div>
        </div>
    </div>
</div>


</body>
</html>

In summary, my issues are:

I'm very confused about where I need to place my javascripts. In the first, stand alone page example, if I move the javascript to the head tag, nothing works. Do I need to put javascript in the head AND the body? If so, what goes where?
How do I implement pagecreate in this example and when should I use it in general?
What other things do I need to do to get this basic example working?
Are there pointers to simple, mobile jQuery code without a ton of extra stuff in them?

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> 
        <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:

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:

<!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 below code inside the 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>

I hope this helps.

来源：https://stackoverflow.com/questions/12051911/can-not-get-multiple-page-jquery-mobile-working-with-google-maps

标签

javascript

jquery

jquery-mobile

google-maps-api-3

jquery-ui-map