谷歌地图有时加载不出来

Question

有人可以快速查看我的代码并协助解决谷歌地图无法随机加载的问题吗？我在这里查看了很多线程并尝试了很多东西但仍然没有结果。谢谢！

页面上的地图容器：

 <div id="google-map" class="" data-latitude="34.0090633" data-longitude="-118.49310960000003" data-wow-duration="" data-wow-delay=""></div>

页面底部的脚本：

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBGNUW5a8iPwxyRu2Jakd88oXm9ZhIcJSQ&callback=initMap">
</script>

外部 .js 文件中的脚本：

var latitude = $('#google-map').data('latitude')
var longitude = $('#google-map').data('longitude')
function initialize_map() {
    var myLatlng = new google.maps.LatLng(latitude,longitude);
    var mapOptions = {
        zoom: 14,
        scrollwheel: false,
        center: myLatlng
    };
    var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
    var contentString = '';
    var infowindow = new google.maps.InfoWindow({
        content: '<div class="map-content"><ul class="address">' + $('.address').html() + '</ul></div>'
    });
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}
google.maps.event.addDomListener(window, 'load', initialize_map);

Answer 1

这可能是因为您正在使用

<script async defer

您的脚本在 google 脚本尚未加载时开始执行。它有时会运行，因为它变成了概率游戏。当您的谷歌脚本提前加载时，它可以工作 - 如果没有，页面会中断。