私がやろうとしているのは、jQuery モバイル ページのコンテンツ タグにゴーグル マップを埋め込むことだけですが、それをページに表示することはできません。ちょっとした間違いだと思いますが、しばらくこれに取り組んできました。助けていただければ幸いです。
<head>
<style type="text/css">
#map_canvas {
height: 256px;
width: 384px;
margin-top: 0.6em;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="fbObj1.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="PATH_TO_PLUGIN/jquery.ui.map.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
</head>
<body>
<script type="text/javascript">
geocoder = new google.maps.Geocoder();
var map = new google.maps.Map($("div#map_canvas"), {
center: new google.maps.LatLng(37.371940, -122.116470),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.index = 2;
</script>
<div data-role="page">
<div data-role="header"></div>
<div data-role="content">
<div id="map_canvas"></div>
</div>
<div data-role="footer" data-position="inline"></div>
</div>
</body>