谷歌地圖現在顯示您的顯示器沒有DIV

Question

我初始化谷歌地圖中顯示無股利和什麼是錯的初始化，我只看到一個灰色的方形

<div style="display:none;" id="divMap"> 
    <div id="map" style="width:300px; height:300px;"></div> 
</div> 
<button onclick="showMap();">test</button> 

，但是當我刪除風格= 「顯示：無;」它的工作原理

我已經創建了一個提琴手https://jsfiddle.net/ka8nywrg/2/ 你可以從這裏測試它。當您按下按鈕時，會顯示 地圖

我應該怎麼做才能防止這種情況發生？

代碼段（從貼小提琴）：

var map; 
 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: {lat: -34.397, lng: 150.644}, 
 
    zoom: 8 
 
    }); 
 
} 
 

 
function showMap(){ 
 

 
document.getElementById("divMap").style.display = 'block' 
 

 
}

/* Always set the map height explicitly to define the size of the div 
 
* element that contains the map. */ 
 
#map { 
 
    height: 100%; 
 
} 
 
/* Optional: Makes the sample page fill the window. */ 
 
html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div style="display:none;" id="divMap"> 
 
<div id="map" style="width:300px; height:300px;"></div> 
 
</div> 
 
<button onclick="showMap();">show map</button> 
 

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

Answer 1

優選調用地圖API V3大小調整方法在地圖上時，有與相應的變化地圖。地圖需要再次呈現。

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

這應該對你有幫助！每當你切換顯示：無屬性只是調用上述功能！

Answer 2

你需要做兩件事情：

1. 呼叫google.maps.event.trigger(map, 'resize');告訴地圖的DIV已經改變大小。

2. 重新設置地圖的中心，一旦div的大小已經確定：

map.setCenter(mapCenter); 

proof of concept fiddle

代碼片段：

var map; 
 
var mapCenter = { 
 
    lat: -34.397, 
 
    lng: 150.644 
 
}; 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: mapCenter, 
 
    zoom: 8 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: map.getCenter() 
 
    }) 
 
} 
 

 
function showMap() { 
 

 
    document.getElementById("divMap").style.display = 'block' 
 
    google.maps.event.trigger(map, 'resize'); 
 
    map.setCenter(mapCenter); 
 

 
}

/* Always set the map height explicitly to define the size of the div 
 
* element that contains the map. */ 
 

 
#map { 
 
    height: 100%; 
 
} 
 
/* Optional: Makes the sample page fill the window. */ 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div style="display:none;" id="divMap"> 
 
    <div id="map" style="width:300px; height:300px;"></div> 
 
</div> 
 
<button onclick="showMap();">show map</button> 
 

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