谷歌地图首次加载失败，有时刷新时加载失败

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

PS google 功能位于单独的“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: '........'
     });
 }

所有这一切，并在加载时打开控制台以确保您没有看到任何错误消息。