谷歌地图不加载在js标签

Question

我试图制作标签使用js有更多的数据在网站上。

请视图：http://dev.ateo.dk/officelab-konferencecenter/

在顶部（ “Billeder” 和 “地图”）的两个选项卡是使用JS制成。

如果我进入名为“kort”的水龙头，谷歌地图不会完全加载 - 但是，如果我右键单击并选择“检查元素（Q）”使用Firefox，地图突然加载。

另外，地图不居中。在特定位置 - 位置在左上角。

您可能会注意到标签div下方的空白方块。这与js选项卡中使用的代码完全相同。如果我在js标签中注释掉这个空白的方块，那么它将完美地工作。所以不知何故似乎js选项卡与js谷歌地图结合不起作用。可以这样，如果是这样，它是如何修复的？

下面我显示这将初始化页面上的谷歌地图和水龙头代码：

if($('body.single-konferencested').length > 0) 
    { 
     tabs(); 
    } 

    if($('body.single-konferencested').length > 0) 
    { 
     $(document).ready(function() { 
     function initialize() { 
      var myLatlng = new google.maps.LatLng(place_lat,place_lng); 
      var mapOptions = { 
       zoom: 9, 
       center: myLatlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 
      var map = new google.maps.Map(document.getElementById('gmap'), mapOptions); 

      var marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map, 
       clickable : true 
      }); 

      var pinIcon = new google.maps.MarkerImage(
       "http://dev.ateo.dk/wp-content/themes/ateo/img/pin_marker.png", 
       null, /* size is determined at runtime */ 
       null, /* origin is 0,0 */ 
       null, /* anchor is bottom center of the scaled image */ 
       new google.maps.Size(24, 40) 
      ); 
      marker.setIcon(pinIcon); 

      var content_string = '<div id="gmap_info">'+ 
            '<div id="siteNotice">'+ 
            '</div>'+ 
            '<h3 id="firstHeading" class="firstHeading">'+place_title+'</h3>'+ 
            '<div id="bodyContent">'+ 
            '<p>'+place_address+'<br />'+place_city_zip+'</div>'+ 
           '</div>'; 

      var infowindow = new google.maps.InfoWindow({ 
       content: content_string 
      }); 

      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.open(map, marker); 
      }); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 

     }); 
    } 

这下面是一个显示为“科尔特”选项卡中的DOM的HTML：

<div class="tabContent" id="kort" style="padding: 5px 10px;"> 

    <h2>Kort</h2> 
    <div id="gmap" style="width: 600px; height: 400px;"></div> 
    <h2>test</h2> 
    </div> 

最好的问候 帕特里克

Answer 1

如果地图将要生活的div不会在页面加载时显示地图将无法正确加载。您应该在div进入视图时触发调整大小。

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

您应该将其绑定到地图选项卡的第一次点击。

看起来地图在第二个选项卡当前被注释掉。如果你可以取消注释，那么更具体的帮助你会更容易！

编辑： 的功能绑定一次，试试这个：

var tab = jQuery('ul#tabs li')[1] 
jQuery(tab).one('click', function(){ 
    google.maps.event.trigger(map, 'resize'); 
}); 

为了调整大小工作，你需要从你的初始化函数访问地图变量。 如果您在其上放置课程，选择正确的选项卡也会更容易。这将是更可靠，然后获得第二个李在标签ul。编辑2： 尝试在初始化代码中添加点击函数。类似于以下内容的东西

var mapOptions = { 
    zoom: 9, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
} 
var map = new google.maps.Map(document.getElementById('gmap'), mapOptions); 

//add the code here, after the map variable has been instantiated 
var tab = jQuery('ul#tabs li')[1] 
jQuery(tab).one('click', function(){ 
    google.maps.event.trigger(map, 'resize'); 
    //fire a center event after the resize, this is also useful 
    // if bound to a window resize 
    map.setCenter(myLatlng) 
}); 
//end of new code 

var marker = new google.maps.Marker({ 
    position: myLatlng, 
    map: map, 
    clickable : true 
}); 

Answer 2

它可以通过重新初始化Google地图的Tab点击轻松解决。

$('#kort').click(function(e) { 
    initialize(); 
    resetMap(map); 
}); 

这种简单的解决方案已在这里找到 - How to Display Google Map Inside of a Hidden Div