Google Map vs Collapsible list
I want to use google map and list on two different tab. The real example is
Here.
The problem is:
if you load the map page "map.php" first, The map can display correctly, but the listview will collapse after you dismiss the dialog window (which is wrong).
If you load the listview page "error.php" first, the listview will keep open after you dismiss the dialog window (which is correct). But the map.php can not be loaded correctly.
I post the full code below. Thanks a lot for the help.
-------------------------
map.php
-------------------------
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>zhongxing</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0,height=device-height,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=zh-cn"> </script>
<style type="text/css">
#map_canvas { height: 100% }
</style>
<style type="text/css">
.labels {
color: black;
background-color: white;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
width: 100px;
border: 2px solid black;
white-space: nowrap;
}
</style>
<script>$(document).ready(function(){window.scrollTo(0, 1);});</script>
<script type="text/javascript">
function initialize()
{
var cur_point = new google.maps.LatLng(29.488081,116.120216);
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 13,
center: cur_point,
disableDefaultUI:true,
scaleControl:true,
zoomControl: true,
scaleControlOptions: {position: google.maps.ControlPosition.TOP_LEFT},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var IconBase = "pics/";
var markers = [];
}
$(document).on("pageinit", "#basic-map", function() {
initialize();
});
</script>
</head>
<body>
<div id="basic-map" data-role="page">
<div data-role="header">
<h1>Boat Management</h1>
</div>
<div style="width:100%; height:100%;position: absolute;">
<div id="map_canvas" ></div>
</div>
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar" >
<ul>
<li><a href="map.php" class="ui-btn-active">Map</a></li>
<li><a href="error.php" >List</a></li>
</ul>
</div>
</div>
</body>
</html>
-------------------------
error.php
-------------------------
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0,height=device-height,user-scalable=no">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="header">
<h1>Count buuble - Collapsible</h1>
</div>
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible" >
<h1><div class="ui-btn-up-c ui-btn-corner-all" style="float: right; font-size: 13px;padding: 0.2em 0.5em;font-weight:bold;">50</div>Test</h1>
<ul data-role="listview" data-filter="true">
<li><a href="nc102.php" data-transition="pop">AAA</a></li>
<li><a href="nc102.php">BBB</a></li>
<li><a href="nc102.php">CCC</a></li>
</ul>
</div>
<div data-role="collapsible" >
<h1><div class="ui-btn-up-c ui-btn-corner-all" style="float: right; font-size: 13px;padding: 0.2em 0.5em;font-weight:bold;">50</div>New</h1>
<ul data-role="listview" data-filter="true">
<li><a href="nc102.php" data-transition="pop">AAA</a></li>
<li><a href="nc102.php">BBB</a></li>
<li><a href="nc102.php">CCC</a></li>
</ul>
</div>
</div>
</div>
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar" >
<ul>
<li><a href="map.php" >Map</a></li>
<li><a href="error.php" class="ui-btn-active">List</a></li>
</ul>
</div>
</div>
</body>
</html>
-----------------
nc102.php
-----------------
<div data-role="dialog">
<div data-role="header" data-theme="d">
<h1>Dialog</h1>
</div>
<div data-role="content" data-theme="c">
<h1>Delete page?</h1>
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attrib$
<a href="#" data-role="button" data-rel="back" data-theme="b" id="button">Sounds good</a>
</div>
</div>