相关疑难解决方法(0)

当使用Google Maps API在jQuery UI选项卡中呈现地图时,有许多问题似乎都是众所周知的.我已经看到关于类似问题发布的SO问题(例如这里和这里),但那里的解决方案似乎只适用于Maps API的v2.我检查过的其他参考文献在这里和这里,以及我可以通过谷歌搜索挖掘的几乎所有内容.

我一直在尝试将地图(使用API​​的v3)填充到具有混合结果的jQuery选项卡中.我正在使用最新版本的一切(目前jQuery 1.3.2,jQuery UI 1.7.2,不了解Maps).

这是标记和javascript:

<body>
    <div id="dashtabs">
        <span class="logout">
            <a href="go away">Log out</a>
        </span>
        <!-- tabs -->
        <ul class="dashtabNavigation">
            <li><a href="#first_tab" >First</a></li>
            <li><a href="#second_tab" >Second</a></li>
            <li><a href="#map_tab" >Map</a></li>
        </ul>

        <!--  tab containers -->
        <div id="first_tab">This is my first tab</div>
        <div id="second_tab">This is my second tab</div>
        <div id="map_tab">
             <div id="map_canvas"></div>
        </div>
    </div>
</body>

和

$(document).ready(function() {
    var map = null;
    $('#dashtabs').tabs();
    $('#dashtabs').bind('tabsshow', function(event, ui) { …

有没有办法阻止从一开始就显示谷歌地图(JS,v3)地图？我正在进行一些预处理,并希望显示我的"加载"微调器,直到一切都好(去更加雄辩地放置,隐藏地图 - 例如容器div- 直到所有预处理完成 - 此时,显示地图).

连接地图的idle事件并没有多大帮助,因为在此事件发生时已经显示了地图.

我知道容器div在加载后由GMaps进行内联样式化,我的第一个想法是清除style属性(同时听取idle事件),但是看看是否有创建地图而不显示的方法会很有趣直到所有预处理完成.

也许通过使用new google.maps.Map构造函数的参数,或者MapOption？

有什么想法吗？

先感谢您!

编辑:现在已经解决了,请参阅下面的答案

情况:

1. 用户点击地图图片
2. 谷歌地图API V3通过ajax加载
3. 地图显示在对话框窗口/灯箱中

怎么了:

地图显示并且所有功能都有效但是地图的左上角"正方形"有一个小故障.

我被卡住了!

编辑:现在使用代码:

<div id="map_canvas"></div>
<script type="text/javascript">
    $(function() {          
            var latlng = new google.maps.LatLng(51.448359,-2.590559);
            var options = {
              zoom: 13,
              center: latlng,
              mapTypeControl: false,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }; 

            var map = new google.maps.Map(document.getElementById('map_canvas'), options);

            var marker = new google.maps.Marker({
              position: new google.maps.LatLng(51.448359,-2.590559),
              map: map
            });
    })
</script>