我有一个谷歌地图jQuery Mobile的工作，这样我可以显示一个独立页面的地图占据了整个屏幕。 不过，我不知道如何做一个简单的第2页例子，我有一个按钮，带我到地图中。
我以为什么在所有的例子身体标记的JavaScript很困惑。 我一直试图在这里下面的例子http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html ，但它是很难弄清楚什么是必要的只是内所有的HTML源的basic_map。 我是新来使用jQuery和JavaScript。
下面是可以作为一个独立的网页的HTML代码。
<!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>
我试图实现，我在纬度和经度的第一页上输入以下2的屏幕例子，然后我去下一个页面上的点为中心的地图。 然而，在文本框中我的地图显示（不是一个新的页面上根据需要），我得到的错误：
遗漏的类型错误：无法调用未定义的方法“changePage”
据其他职位的错误与我需要打电话给做pagecreate函数代替$(document).ready() 我没有要求任何的这些功能，因为我不知道他们是否是必要的，因为我是能够使其他简单的多页面的移动Web应用程序，而无需等待其他网页做好准备或创建的。
我产生了错误多屏代码
<!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>
总之，我的问题是：
我很担心，我需要把我的JavaScript很困惑。 在第一阶段，独立页面例如，如果我移动JavaScript来head标签，没有什么工作。 我需要把JavaScript的头部和身体？ 如果有的话，去哪里？
如何实现
pagecreate在这个例子中，我当一般应使用它？做什么其他的事情，我需要做的就是这个简单的例子工作？
是否有指针，以简单，移动jQuery代码没有一吨在他们额外的东西吗？
