Question

所以我知道这是一个常见问题，但我觉得我已经用尽所有标准物品。

我在div中有一个jQuery Tab和一个Google Map（2）也有问题。我已经实现了绝对位置+ -10000px选项。我已经实现了$（）。bind（'tabshow'）.... resizeMap（）;

我在这个问题上没有成功。

我已经尝试将.load（）用于保存我的地图的外部文件，并取得了巨大成功，但它似乎不是正确的解决方案，因为传递动态变量似乎并不是最佳的。

<div id="contactTabs">
    <ul>
      <li><a href="#maps"  title="Maps">Maps</a></li>
    </ul>

    <div id="maps">
    <!-- I have placed my Javascript in here -->
    <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA633BaQwEpWRjp-R1aATdPBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSkwAkIjGEiaeBEJXzobQZ3JjouCg"></script>
    <script type="text/javascript" src="js/jquery.gmap-1.1.0-min.js"></script>
    <script type="text/javascript">
    $(function() {
      $("#newMap").gMap({ 
          maptype: G_NORMAL_MAP,
          address: '--centering adddy--',
          zoom: 14,
          markers: [ ]                  
      });
    });
    </script>

    <div id="newMap" style="height: 400px;"></div>
</div>

提前感谢你的帮助。我知道这对标签和地图来说是一个令人筋疲力尽的问题。希望有人可以帮助我。

干杯，alt text http://i29.tinypic.com/5do6s2.jpg

Answer 1

创建地图后，请尝试添加：

$("#newMap").height(100);
$("#newMap").width(100);

或类似的东西。

Answer 2

放置您的Google Maps API

<head>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
        var map;
        function initialize() {
            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(-34.397, 150.644),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
     </script>

将此代码放入页面底部调用的其他JS文件中

$(document).ready(function() {
    $('#idOfYourTabButton').on('click', function() {
        lastCenter=map.getCenter(); //for center
        google.maps.event.trigger(map, 'resize'); //for resize
        map.setCenter(lastCenter); //for center too
    });
});

希望有所帮助

jQuery UI +标签+谷歌地图

2 个答案: