谷歌地图地图在物化标签

Question

我试图通过动态地改变内容来创建一个看起来很快的网站，所以我使用选项卡系统表单物化，一切都很好，除了我的谷歌地图地图是通过API生成的作为一个空白窗口： map

它显示地图当我调整窗口的大小，或者如果页面处于活动状态，活动不是解决方案！

预先感谢可能的解决方案/修复

我创造了这个的jsfiddle向人们展示它：https://jsfiddle.net/8ajob4ja/

HTML：

<div class="row"> 
    <div class="col s12"> 
     <ul class="tabs"> 
     <li class="tab col s6"><a href="#test1">Test 1</a></li> 
     <li class="tab col s6"><a href="#test2" class="active">Test 2</a></li> 
</ul> 
     </div> 
     <div id="test1" class="col s12">   
    <h3>My Google Maps Demo</h3> 
    <div id="map"></div> 
    <!-- Replace the value of the key parameter with your own API key. --> 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> 
    </script> 
     </div> 
     <div id="test2" class="col s12"> 
     2 
     </div> 
    </div> 

JS：

function initMap() { 
    var uluru = {lat: -25.363, lng: 131.044}; 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: uluru 
    }); 
    var marker = new google.maps.Marker({ 
    position: uluru, 
    map: map 
    }); 
} 

个

CSS：

#map { 
    height: 400px; 
    width: 100%; 
} 

Answer 1

请试试这个代码。因为google在执行脚本时直接调用initMap()，所以当时由于某种原因导致地图对象未初始化所以出于这个原因，我们需要像这样调用initMap()。

删除&从js链接回调= initMap所以它看起来像下图。

<script async defer 
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"> 
</script> 

在选项卡中添加类。

<li class="tab col s6 test"><a href="#test1">Test 1</a></li> 

用这段代码替换你的jQuery。

$(".test").click(function() {initMap();}); 

function initMap() { 
    var uluru = {lat: -25.363, lng: 131.044}; 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: uluru 
    }); 
    var marker = new google.maps.Marker({ 
    position: uluru, 
    map: map 
    }); 
} 

希望这会有所帮助。

Answer 2

需要触发地图上的resize事件的标签之后变为主动（以及地图的大小）。

$('ul.tabs').on('click', 'a', function(e) { 
    setTimeout(function() { 
    google.maps.event.trigger(map, 'resize'); 
    }, 500); 
}); 

代码片段：

function initMap() { 
 
    var uluru = { 
 
    lat: -25.363, 
 
    lng: 131.044 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 4, 
 
    center: uluru 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
    position: uluru, 
 
    map: map 
 
    }); 
 
} 
 
$('ul.tabs').on('click', 'a', function(e) { 
 
    setTimeout(function() { 
 
    google.maps.event.trigger(map, 'resize'); 
 
    }, 500); 
 
});

#map { 
 
    height: 400px; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet" /> 
 
<div class="row"> 
 
    <div class="col s12"> 
 
    <ul class="tabs"> 
 
     <li class="tab col s6"><a href="#test1">Test 1</a></li> 
 
     <li class="tab col s6"><a href="#test2" class="active">Test 2</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div id="test1" class="col s12"> 
 

 
    <h3>My Google Maps Demo</h3> 
 
    <div id="map"></div> 
 
    <!-- Replace the value of the key parameter with your own API key. --> 
 
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"> 
 
    </script> 
 
    </div> 
 

 
    <div id="test2" class="col s12"> 
 
    2 
 
    </div> 
 

 
</div>