谷歌地图无法第一次加载，有时在刷新

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: '........' 
    }); 
} 

这一切，并弹出打开当你加载时，确保你没有看到任何错误信息