谷歌地圖API不起作用，地圖只顯示調整大小或刷新頁面後？

Question

我看了其他類似的線程，我花了數小時試圖解決這個問題。

resize事件不適用於我。

基本上只有一個灰色框最初加載，它只是當我刷新或調整瀏覽器的大小，然後地圖加載完全。

我使用的代碼如下給出了地圖：

<script> 
    function initMap() { 

     var center1 = { 
      lat: 51.258426, 
      lng: -1.361344 
     }; 
     var londoneye = { 
      lat: 51.503331, 
      lng: -0.119543 
     }; 
     var bigben = { 
      lat: 51.500726, 
      lng: -0.124629 
     }; 
     var tower = { 
      lat: 51.508139, 
      lng: -0.075939 
     }; 
     var ss = { 
      lat: 51.449164, 
      lng: -2.608417 
     }; 
     var windsor = { 
      lat: 51.483907, 
      lng: -0.604435 
     }; 
     var stone = { 
      lat: 51.178895, 
      lng: -1.826215 
     }; 
     var map = new google.maps.Map(document.getElementById("map"), { 
      zoom: 8, 
      center: center1 
     }); 

     var map1 = new google.maps.Map(document.getElementById('map1'), { 
      zoom: 14, 
      center: londoneye 
     }); 

     var map2 = new google.maps.Map(document.getElementById('map2'), { 
      zoom: 14, 
      center: bigben 
     }); 

     var map3 = new google.maps.Map(document.getElementById('map3'), { 
      zoom: 14, 
      center: tower 
     }); 

     var map4 = new google.maps.Map(document.getElementById('map4'), { 
      zoom: 14, 
      center: ss 
     }); 

     var map5 = new google.maps.Map(document.getElementById('map5'), { 
      zoom: 14, 
      center: windsor 
     }); 

     var map6 = new google.maps.Map(document.getElementById('map6'), { 
      zoom: 14, 
      center: stone 
     }); 

     var boundary = new google.maps.Map(document.getElementById('boundary'), { 
      zoom: 8, 
      center: center1 
     }); 


     var cityCircle = new google.maps.Circle({ 
      strokeColor: '#000000', 
      strokeOpacity: 0.8, 
      strokeWeight: 2, 
      fillColor: '#FF0000', 
      fillOpacity: 0.1, 
      map: boundary, 
      center: center1, 
      radius: 100000 
     }); 


     var marker1 = new google.maps.Marker({ 
      position: londoneye, 
      map: map 


     }); 



     var marker12 = new google.maps.Marker({ 
      position: londoneye, 
      map: map1 


     }); 

     var marker2 = new google.maps.Marker({ 
      position: bigben, 
      map: map 
     }); 

     var marker22 = new google.maps.Marker({ 
      position: bigben, 
      map: map2 
     }); 



     var marker3 = new google.maps.Marker({ 
      position: tower, 
      map: map 
     }); 

     var marker32 = new google.maps.Marker({ 
      position: tower, 
      map: map3 
     }); 




     var marker4 = new google.maps.Marker({ 
      position: ss, 
      map: map 
     }); 

     var marker42 = new google.maps.Marker({ 
      position: ss, 
      map: map4 
     }); 




     var marker5 = new google.maps.Marker({ 
      position: windsor, 
      map: map 

     }); 

     var marker52 = new google.maps.Marker({ 
      position: windsor, 
      map: map5 

     }); 




     var marker6 = new google.maps.Marker({ 
      position: stone, 
      map: map 
     }); 

     var marker62 = new google.maps.Marker({ 
      position: stone, 
      map: map6 
     }); 




     var marker1content = '<b><font color="black">London Eye</font></b>' 
     var marker2content = '<b><font color="black">Big Ben</font></b>' 
     var marker3content = '<b><font color="black">Tower of London</font></b>' 
     var marker4content = '<b><font color="black">SS Great Brtain</font></b>' 
     var marker5content = '<b><font color="black">Windsor Castle</font></b>' 
     var marker6content = '<b><font color="black">Stonehenge</font></b>' 

     var infowindow1 = new google.maps.InfoWindow({ 
      content: marker1content 
     }); 

     var infowindow2 = new google.maps.InfoWindow({ 
      content: marker2content 
     }); 
     var infowindow3 = new google.maps.InfoWindow({ 
      content: marker3content 
     }); 
     var infowindow4 = new google.maps.InfoWindow({ 
      content: marker4content 
     }); 
     var infowindow5 = new google.maps.InfoWindow({ 
      content: marker5content 
     }); 
     var infowindow6 = new google.maps.InfoWindow({ 
      content: marker6content 
     }); 


     marker1.addListener('click', function() { 
      infowindow1.open(map, marker1); 
     }); 
     marker2.addListener('click', function() { 
      infowindow2.open(map, marker2); 
     }); 
     marker3.addListener('click', function() { 
      infowindow3.open(map, marker3); 
     }); 
     marker4.addListener('click', function() { 
      infowindow4.open(map, marker4); 
     }); 
     marker5.addListener('click', function() { 
      infowindow5.open(map, marker5); 
     }); 
     marker6.addListener('click', function() { 
      infowindow6.open(map, marker6); 
     }); 


    } 
</script> 

我已經看過了瀏覽器控制檯，並沒有錯誤。

正如我之前所說的，我也嘗試了所有其他類似線程所提到的resize函數。

任何人都可以請幫忙嗎？

編輯：我也根據請求添加了下面的CSS，每個id然後對應一個div。

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


      margin: 0 auto; 
      margin-top: 10%; 
     } 

    #map1{ 

     height: 400px; 
     width: 100%; 

      margin: 0 auto; 
      margin-top: 10%; 
     } 

    #map2{ 
     height: 400px; 
     width: 100%; 
      margin: 0 auto; 
      margin-top: 10%; 
      } 
     #map3{ 
     height: 400px; 
     width: 100%; 
      margin: 0 auto; 
      margin-top: 10%; 
     } 

    #map4{ 
     height: 400px; 
     width: 100%; 
      margin: 0 auto; 
      margin-top: 10%; 
     } 

    #map5{ 
     height: 400px; 
     width: 100%; 
      margin: 0 auto; 
      margin-top: 10%; 
      } 

    #map6{ 
     height: 400px; 
     width: 100%; 
      margin: 0 auto; 
      margin-top: 10%; 
      } 

    #boundary{ 

     height: 400px; 
     width: 100%; 
      margin: 0 auto; 
      margin-top: 10%; 
      } 

Answer 1

我把你的JavaScript和CSS;使用我自己的API密鑰和HTML佈局和所有地圖加載得很好。我建議你在你的initMap函數中加入一個alert/console.log來驗證你正在進入這個函數調用。

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<meta charset="utf-8" /> 
<style type="text/css"> 
    /*Your CSS Here*/ 
    /*#map { 

    } 
    ...*/ 
</style> 
<script type="text/javascript"> 
    //initMap function Here 
    //function initMap() { 
    // //Code 
    //} 
</script> 
<script async defer 
     src="https://maps.googleapis.com/maps/api/js?key=[API-Key-No-Brackets]&callback=initMap"> //Add Your API Key 
</script> 

</head> 
<body> 
<div id="map"></div> 
<div id="map1"></div> 
<div id="map2"></div> 
<div id="map3"></div> 
<div id="map4"></div> 
<div id="map5"></div> 
<div id="map6"></div> 
<div id="boundary"></div> 
</body> 
</html> 

Answer 2

我測試過這種方式太多了，我發現它取決於其他一些腳本，停止地圖渲染以及其他渲染。

這可能是使用window.resize方法的腳本，如果你刪除自定義大小調整腳本問題解決了（即：引導或主題調整大小的js腳本）

臨時解決方案，我發現是火window resize一旦地圖已經加載，像這樣的東西：

var upd = setInterval(function(){ 
    window.dispatchEvent(new Event('resize')); 
    clearInterval(upd) 
}, 2000)