谷歌地圖地圖在物化標籤

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>