：點擊回來時，「類型錯誤一個爲空」在谷歌地圖API

Question

我得到一個「類型錯誤：一個是空」，並在谷歌地圖API空白地圖點擊回來的時候：

14:27:57.271 TypeError: a is null 
_.Uf()js:82 
Dg()js:90 
initMap()map.php:36 
Zg/<()js:96 
lc/e<()js:49 
_.ac()js:46 
lc()js:49 
<anonymous>js:130 
google.maps.Load()js:21 
<anonymous>js:130 
<anonymous>js:26 
1js:82:453 

頭部段我使用：

<script src="https://maps.googleapis.com/maps/api/js?v=3.25& 
key=xxxxxxxxxxxxxxxxxxxxxxxxxxxx_yyyyyyyyyy&callback=initMap" async="" 
defer=""></script> 
<script> 
    var map; 
    function initMap() { 
     var center = { 
      lat: 51.46606900136, 
      lng: -2.5865578706776 
     }; 
     map = new google.maps.Map(document.getElementById("map"), { 
      center: center, 
      zoom: 14, 
      mapTypeId:google.maps.MapTypeId.ROADMAP 
     }); 
     var marker = new google.maps.Marker({ 
      position: center, 
      icon: "icon.png", 
      map: map 
     }); 
    } 
</script> 

主體部分具有地圖元素：

<div id="map"></div> 

的地圖顯示行的第一次。這個問題似乎只發生在點擊後，所以我猜我需要以某種方式強制Javascript再次執行，如果頁面以這種方式重新加載。

Answer 1

我的猜測是，當你回到你的地圖時，在調用initMap函數之前<div id=map></div>還沒有渲染。爲了解決這個問題將代碼放在身體<div id="map"></map>後：

代碼片段：

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<div id="map"></div> 
 
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script> 
 
<script> 
 
    var map; 
 

 
    function initMap() { 
 
    var center = { 
 
     lat: 51.46606900136, 
 
     lng: -2.5865578706776 
 
    }; 
 
    map = new google.maps.Map(document.getElementById("map"), { 
 
     center: center, 
 
     zoom: 14, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
     position: center, 
 
     // icon: "icon.png", 
 
     map: map 
 
    }); 
 
    } 
 
</script>