Javascript 谷歌地图赢得'；不能在jQueryUI选项卡中工作

我正在使用谷歌地图的javascript API。很简单，我只有：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
          function initialize() {
            var myLatlng = new google.maps.LatLng(<?php echo $get_music_spot['music_spot_lat'].', '.$get_music_spot['music_spot_lng']; ?>);
            var myOptions = {
              zoom: 14,
              center: myLatlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var marker = new google.maps.Marker({
                position: myLatlng, 
                map: map,
                title:"<?php echo $get_music_spot['music_spot_title']; ?>"
            });   
          }
</script>

函数初始化（）{
var mylatng=new google.maps.LatLng（）；
变量myOptions={
缩放：14，
中心：myLatlng，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
var marker=new google.maps.marker({
职位：myLatlng，
地图：地图，
标题：“
});   
}

在标题中，我有

在身体中实际调用地图。当然我有

这就是基本地图所需的全部内容。但是，因为它位于jQuery内部，例如jQuery UI选项卡，所以它会失控。下面是一个屏幕截图：

---

您可以看到，只有地图的一部分显示在左上角。为什么会发生这种情况？我该如何解决？我将iFrame实现为一个基本的嵌入，但这在IE中不起作用。

至于为什么它不起作用，我不能告诉你为什么。但是尝试使用jquerytabs小部件上的一个事件来初始化映射，例如

show

或

select

事件

$('#myTabs').tabs({
    show: function(event, ui){

        // check if is "mappanel" and "map" is empty
        if (ui.panel.id == 'mappanel' && $('#map').is(':empty'))
        {
            // load map
            var myOptions = {
                center: new google.maps.LatLng(-34.397, 150.644),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map"), myOptions);      
        }
    }                    
});

在其中包含检入非常重要，这样地图就不会在每次选择“地图”选项卡（或任何其他选项卡）时重新加载

---

看看它是如何工作的。

这甚至在jQueryUI的站点上都有记录：啊，的确如此。有趣的左下角技巧。干杯