ページを直接開くと、マップ セクションが読み込まれます。ただし、別のページのリンクからページを開くと、マップが読み込まれません。スクリプトはロードされないため、Head タグに含めてはならないという以前の投稿を見ました。ただし、それらをdata-role="page"
セクションに配置すると、マップのロードにまだ失敗します。私のコードは以下です。前もって感謝します。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Boilerplate
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./ui/jquery.ui.map.js"></script>
<script type="text/javascript">
$(function() {
$('#map_canvas').gmap();
});
</script>
</head>
<body>
<div id="detailpage" data-role="page" data-theme="c" data-add-back-btn="true">
<div data-role="header" data-id="head1" data-position="fixed"> <h1>Header</h1>
</div>
<!-- /header -->
<div data-role="content">
<hr> <b>Title Section</b>
<hr> This is a detailed description section where we can insert some content here with
<br> some page breaks in it.
<br>
<hr> This section contains details about the businsess and some other controls and forms.
<br>
<br>
<hr>
<div id="map_canvas" style="width:100%;height:250px">
</div>
</div>
<!-- /content -->
<div data-role="footer" data-id="foot1" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
<a href="a.html">D</a>
</li>
<li>
<a href="b.html">C</a>
</li>
<li>
<a href="c.html">P</a>
</li>
</ul>
</div>
<!-- /navbar -->
</div>
<!-- /footer -->
</div>
</body>
</html>