谷歌地图未在 js 选项卡中加载

Posted 2023-02-21

【中文标题】谷歌地图未在 js 选项卡中加载

【英文标题】：Google maps not loading within js tab

【发布时间】：2014-08-24 21:32:51

【问题描述】：

我正在尝试使用 js 制作标签以在网站上获得更多数据。

请查看：http://dev.ateo.dk/officelab-konferencecenter/

顶部的两个选项卡（“Billeder”和“kort”）是使用 js 制作的。

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

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

您可能会注意到标签 div 下方有一个空白方块。这与 js 选项卡中使用的代码完全相同。如果我注释掉 in 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);

      );
   

以下是显示“Kort”选项卡的 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>

最好的问候 帕特里克

【参考方案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');
);

为了使调整大小起作用，您需要从 init 函数访问 map 变量。 如果您将课程放在上面，选择正确的选项卡也会更容易。这会比在标签 ul 中获得第二个 li 更可靠。

编辑 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
);

【讨论】：

您好，谢谢您的帮助。当然，我很抱歉，虽然我把它重新活了一遍。它现在应该再次可见，并且应该可以查看错误

您好 Wolffer，我现在已经尝试了您建议的解决方案，但没有任何运气。我已经在这里pastebin.com/U9W310c2 发布了标签的完整代码，您的建议是在 showTab() 中调整谷歌地图的大小 - 它在代码 sn-p 中被注释掉。你有什么建议我可以试试？

您无权访问 showTab 函数范围内的 map 变量。我建议将我编辑的代码添加到您的初始化函数中。我将在上面发布一个编辑来演示一下

太棒了，好用！但是，我仍然在地图居中时遇到问题。如果您看到以下代码，我尝试使用您的代码修复居中：pastebin.com/6rjsT78C 居中在加载时不起作用，但如果刷新页面，地图将居中。这怎么可能？

在触发 re 大小后尝试触发 re center。因为地图是在一个较小的空间中初始化的，所以它以该区域为中心。一旦你调整它的大小，它就不知道你想让它重新居中，直到你告诉它。因此，在与以前相同的单击函数中使用以下内容：map.setCenter(myLatlng)。我已经编辑了我的帖子以显示新代码。

【参考方案2】：

点击Tab键重新初始化谷歌地图即可轻松解决。

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

这个简单的解决方案是从这里找到的 - How to Display Google Map Inside of a Hidden Div