Javascript Google Maps API V3在使用Twitter的选项卡式页面上无法完全呈现；s引导

我正在使用Twitter的引导来定义我的CSS。我做了一个有三个标签的页面。第二个选项卡包含使用谷歌地图构建的地图。但是，当打开页面并切换到带有贴图的第二个页面时，贴图不会完全呈现。一旦我用谷歌地图选项卡作为所选选项卡重新加载页面，地图将完全加载

我读过一些帖子，建议有相同问题的人在javascript中添加以下代码：

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(homeLatlng);
});

<script type="text/javascript">
function initialize() {
    google.maps.event.addDomListener(window, 'resize', function() {
        map.setCenter(homeLatlng);
    });

    var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
    var myOptions = {
        zoom: 13,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    downloadUrl("data.xml", function(data) {
        var markers = data.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
            var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), 
                                parseFloat(markers[i].getAttribute("lng")));
            var marker = new google.maps.Marker({position: latlng, map: map});
        }
    });
}
</script>

然而，这似乎不是解决办法。请在下面找到完整的代码：

Javascript:

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(homeLatlng);
});

<script type="text/javascript">
function initialize() {
    google.maps.event.addDomListener(window, 'resize', function() {
        map.setCenter(homeLatlng);
    });

    var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
    var myOptions = {
        zoom: 13,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    downloadUrl("data.xml", function(data) {
        var markers = data.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
            var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), 
                                parseFloat(markers[i].getAttribute("lng")));
            var marker = new google.maps.Marker({position: latlng, map: map});
        }
    });
}
</script>

函数初始化（）{
google.maps.event.addDomListener（窗口，“调整大小”，函数（）{
地图设置中心（homeLatlng）；
});
var mylatng=newgoogle.maps.LatLng（37.4419，-122.1419）；
变量myOptions={
缩放：13，
中心：myLatlng，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
下载URL（“data.xml”，函数（数据）{
var markers=data.documentElement.getElementsByTagName（“标记”）；
对于（var i=0；i

HTML:

我如何解决这个问题？也许我可以添加一些javascript，一旦选择了标签，就可以重新加载GoogleMaps部分，但我不知道怎么做

更新的代码仍显示错误：

<div class="tab-pane" id="orange" style="background-color:#E3F2FF;">
    <div id="map_canvas" style="width:780px; height:400px; overflow:;"></div>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="util.js"></script>
    <script type="text/javascript">
      function initialize() {
        google.maps.event.addDomListener(window, 'resize', function() {
            map.setCenter(homeLatlng);
        });

        var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
        var myOptions = {
          zoom: 13,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        downloadUrl("data.xml", function(data) {
          var markers = data.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                        parseFloat(markers[i].getAttribute("lng")));
            var marker = new google.maps.Marker({position: latlng, map: map});
           }
        });
        map.checkResize();
    }
    </script>
</div>

函数初始化（）{
google.maps.event.addDomListener（窗口，“调整大小”，函数（）{
地图设置中心（homeLatlng）；
});
var mylatng=newgoogle.maps.LatLng（37.4419，-122.1419）；
变量myOptions={
缩放：13，
中心：myLatlng，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
下载URL（“data.xml”，函数（数据）{
var markers=data.documentElement.getElementsByTagName（“标记”）；
对于（var i=0；i

我也在与这个问题作斗争。我使用了一个模态形式，它在地图被隐藏时渲染了它。显示该选项卡时，您需要触发以下代码：

google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );

希望它对你有用。如果这不起作用，这里是我找到解决方案的链接。也许会有另一个有用的评论

---

要在隐藏的div中显示google地图，必须在创建和加载地图之前显示div。以下是一个例子：

<div  id="map_canvas" style="width:500px; height:500px"></div>

<script>
$(document).ready(function(){
  $('#button').click(function() {
    $('#map_canvas').delay('700').fadeIn();
    setTimeout(loadScript,1000);
  }); 
});

    function initialize() {
        var title= "Title";
        var lat = 50;
        var lng = 50;
        var myLatlng = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
        var myOptions = {
        zoom: 8,
        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,
            title:artTitle
        });
        // To add the marker to the map, call setMap();
        marker.setMap(map);
    }

    function loadScript() {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
      document.body.appendChild(script);
    }       
</script>

$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
$（'map_canvas'）.delay（'700'）.fadeIn（）；
setTimeout（加载脚本，1000）；
}); 
});
函数初始化（）{
var title=“title”；
var-lat=50；
var lng=50；
var mylatng=new google.maps.LatLng（parseFloat（lat），parseFloat（lng））；
变量myOptions={
缩放：8，
中心：myLatlng，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
var marker=new google.maps.marker({
职位：myLatlng，
标题：artTitle
});
//要将标记添加到映射，请调用setMap（）；
marker.setMap（map）；
}
函数loadScript（）{
var script=document.createElement（“脚本”）；
script.type=“text/javascript”；
script.src=”http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild（脚本）；
}       

我使用

google.maps.event.trigger(map, 'resize');

bootstrap tab.js中的inside show函数意味着在显示框时，您应该触发resize事件并将工作

编辑：我看到了另一个答案相同的链接

---

在解决问题后，我看到了此链接，以找出仍然没有回答的原因，即为什么resize事件在选项卡的单击事件上不起作用，但在选项卡中起作用js在测试不同延迟后对我有效：

    $(window).resize(function() {
        setTimeout(function() {
              google.maps.event.trigger(map, 'resize');
           }, 300)            

});

---

希望有帮助。

对我来说，它的工作原理是在模态显示之后调用渲染贴图的函数

我所要做的就是：

$(document).on("shown", "#eventModal", function(){
    bindMap(coordinates);
});

---

您也可以对选项卡执行同样的操作，因为它们还有一个“显示”事件。

这对我来说很好，我使用jquery选项卡

            setTimeout(function() {
            google.maps.event.trigger(map, "resize");
            map.setCenter(new google.maps.LatLng(default_lat, default_lng));
            map.setZoom(default_map_zoom);
        }, 2000);

---

从这个链接来看，这里有很多解决方案，坦率地说，它们都错了。如果您必须使用引导选项卡的默认功能，那么最好不要使用引导选项卡。如果您只是在显示选项卡后才调用resize，那么您可能仍然存在GMaps界面的问题（缩放级别等）。您只需在选项卡可见后初始化地图

var myCenter=new google.maps.LatLng(53, -1.33);
var marker=new google.maps.Marker({
    position:myCenter
});

function initialize() {
  var mapProp = {
      center:myCenter,
      zoom: 14,
      draggable: false,
      scrollwheel: false,
      mapTypeId:google.maps.MapTypeId.ROADMAP
  };

  var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
  marker.setMap(map);

  google.maps.event.addListener(marker, 'click', function() {

    infowindow.setContent(contentString);
    infowindow.open(map, marker);

  }); 
};

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    initialize();
});

您可以在这个bootply中看到一个工作示例：

注意：如果您的界面仍然存在故障，则可能是以下问题：

使用最新的gmaps api，您只需在样式中添加以下内容：

.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }

---

可能重复：无法将google地图加载到隐藏元素中。你需要在元素显示后加载地图。嗨，Mathletics，谢谢你的帮助。我只是用以下方式更新了脚本，试图在显示元素后加载映射，但这仍然会导致错误。我已经在上面列出了更新的代码：“error”me