在引导标签中加载Google地图,修复显示为空白

Question

更新 我尝试实现wf的解决方案,但错误仍然存​​在.您可以在这里查看一个实例 - > http://www.opohills.com/taipei-rentals/apollo_a.php

向下滚动并单击"位置"选项卡

我正在尝试在引导程序选项卡中加载谷歌地图.我遇到了这里讨论的同样的问题,并且广泛地在SA -

https://github.com/twitter/bootstrap/issues/2330

---

修复是在单击选项卡时添加回调,以加载地图.我正在尝试实现这一点,但没有成功.错误仍然存​​在(当左上角只有1/8的地图显示时.)当我打开检查元素时,地图填满并正常工作(我猜是因为检查元素正在重读javascript)

下面是我的javascript,因为这是我的第一个真正的形式,我确信我做错了什么 -

  <script type="text/javascript">

    var map,
        marker = new google.maps.Marker({
                   position: new google.maps.LatLng(25.041483, 121.553984),
                   draggable: true,
                   title: 'Opo Apartment' }),
        infoWindow = new google.maps.InfoWindow({content: 'Apollo Apartment'});

        $('#location').on('show', function(e) {
          if( map == undefined) {  

            map =    new google.maps.Map(
                     document.getElementById('map-canvas'), 
                      { zoom: 14,
                        center: new google.maps.LatLng(25.041483, 121.553984),
                        mapTypeId: google.maps.MapTypeId.ROADMAP })
          }
          marker.setMap(map);
          infoWindow.open(map, marker);
        })

  </script>?

你对此有何看法？

Answer 1

我修复了它,但是将它保存在不同的div中,远离选项卡,并在单击某个选项卡时显示它.您可以访问同一站点以查看代码

$(document).ready(function(){

  var map,
      marker = new google.maps.Marker({
                 position: new google.maps.LatLng(25.041483, 121.553984),
                 draggable: true,
                 title: 'Opo Apartment' }),
      infoWindow = new google.maps.InfoWindow({content: 'Apollo Apartment'});



  $('#location').on('show', function(e) {
    if( map == undefined) {  

      map =    new google.maps.Map(
               document.getElementById('map-canvas'), 
                { zoom: 14,
                  center: new google.maps.LatLng(25.041483, 121.553984),
                  mapTypeId: google.maps.MapTypeId.ROADMAP })
    }
    document.getElementById("largemap").style.display="block";

    google.maps.event.trigger(map, 'resize');
            marker.setMap(map);
    infoWindow.open(map, marker);
  })
  $('.tabclick').on('show', function(e) {
    document.getElementById("largemap").style.display="none";

  })

})