JQuery Accordion和Google Maps - 不是地图居中/显示的问题

时间:2011-12-07 16:55:30

标签: jquery jquery-ui google-maps

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>

0 个答案:

没有答案