谷歌地圖無法第一次加載，有時在刷新

Question

，所以我添加谷歌地圖到我的網站。在第一頁加載 - 它不加載。刷新時 - 有時不會加載。

代碼：

HTML：

<div id="map"> 
 
    </div> 
 
    
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDKxMTYIeZepn8E6EULm9eFZCixv960J2s&callback=initMap"> 
 
    </script> 
 
    <script src="script.js"></script>

的jQuery：

function initMap() {}; 
 
$(document).ready(function() { 
 
    initMap = function() { 
 
    var myLatLng = { 
 
     lat: 40.1511, 
 
     lng: -2.150609 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
     zoom: 16, 
 
     center: myLatLng, 
 
     disableDefaultUI: true, 
 
     styles: [ 
 
      ....  
 
     ] 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
     position: myLatLng, 
 
     map: map, 
 
     title: '........', 
 
    }); 
 
    } 
 
});

P.S.谷歌功能是在單獨的「script.js」文件。

Answer 1

擺脫你所有的$(document).ready廢話（只要script.js出現在你的<div id="map"></div>這是最重要的）。

真正的問題可能是怪異initMap聲明（先聲明它，然後再次聲明這裏面$(document).ready

所以script.js應該是這樣的：

var initMap = function() { 
    var myLatLng = { 
     lat: 40.1511, 
     lng: -2.150609 
    }; 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 16, 
     center: myLatLng, 
     disableDefaultUI: true, 
     styles: [ 
      ....  
     ] 
    }); 
    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     title: '........' 
    }); 
} 

這一切，並彈出打開當你加載時，確保你沒有看到任何錯誤信息