http://i.stack.imgur.com/lxb7P.jpg
上面链接的是使用JQuery UI Accordion制作的三个标签。第三个(图片中打开)包含嵌入式Google Map。空红色矩形是地图应显示的位置。上述错误仅出现在Safari中,我无法在任何其他浏览器中复制它。
地图包含在名为地图画布
的div中<h3 id="pasek3"><a href="#"></a></h3> // third tab
<div id="content_wrap">
<div id="podPaskiem3"> // under the panel
<p id="lewo1"> // left half
CONTACT/ADRESS DETAILS
</p>
<p id="prawo2"> // right half
<div id="mapCanvas"></div>
</p>
</p>
</div>
</div>
<!--content_wrap--></div >
这些是divs属性
mapCanvas {
border: 0;
width: 500px;
height: 350px;
margin: 0 auto;
}
这是负责在打开第三个标签后显示和居中地图的脚本:
<script>
var map = null;
var latlng = new google.maps.LatLng(52.2729782, 20.9861867);
function initializeMap() {
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
return new google.maps.Map($('#mapCanvas')[0], myOptions);
}
// Function for adding a marker to the page.
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
// Testing the addMarker function
function TestMarker() {
CentralPark = new google.maps.LatLng(52.2729782, 20.9861867);
addMarker(CentralPark);
}
$(document).ready(function() {
$("#accordion").accordion();
$("#accordion").bind('accordionchange', function(event, ui) {
if (ui.newContent.attr('id') == 'content_wrap' && !map)
{
map = initializeMap();
TestMarker();
}
});
});
</script>