Google Maps v3 API仅在刷新/身份验证后非常缓慢地加载

Question

使用Google Maps v3 API。当我访问地图页面时，有时会出现以下错误："custom.js:46 Uncaught ReferenceError: google is not defined"。

启用API的关键是：

• Google Maps Directions API
• Google Maps Distance Matrix API
• Google Maps Elevation API
• Google Maps Geocoding API
• Google Maps JavaScript API

当我重新加载页面时，一切正常。这在100％的时间内无效。在某些情况下需要多次重新加载。

我确实注意到，当地图未正确加载时，此脚本正在我的head标签中运行：

<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate?1shttp%3A%2F%2Fmayan-co.com%2Fen%2Foutlets&amp;MYKEY&amp;callback=_xdc_._h7cv8d&amp;token=60166"></script>

10到20秒后，此脚本消失，当我在此脚本消失后刷新页面时，我的地图可以正常工作。

我尝试没有结果的事情：

• 将脚本放入页脚中以加载API。
• 不使用异步或延迟。
• 将特定的网址添加到我的api密钥中。
• 不使用api密钥

在页面顶部加载api脚本：

<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY" async defer></script>

我的脚本，用于渲染地图并将标记放置在地图上（已加载到页脚中）

jQuery(document).ready(function($) {
    $('#animation').addClass('animate');

    $('.heart img').popover({
        placement: 'top',
        html: true,
        container: '#animation',
        content: function () {
            return $(this).attr('alt');
        }
    });

    $('body').on('click', function(e) {
        $('.heart img').each(function() {
            if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.heart img').has(e.target).length === 0) {
                $(this).popover('hide');
            } else {
                $(this).popover('toggle');
            }
        });
    });

    function render_map($el) {

        var $markers = $(document).find('#locations .data-source li');

        var args = {
            zoom: 16,
            center: new google.maps.LatLng(0, 0),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false,
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP]
            }
        };

        var map = new google.maps.Map($el[0], args);

        map.markers = [];

        index = 0;
        $markers.each(function() {
            add_marker($(this), map, index);
            index++;
        });

        center_map(map);
    }

    function add_marker($marker, map, index) {
        var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));
        var image = '../../img/maps-leaf.png';
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: image
        });
        map.markers.push(marker);
        if ($marker.html()) {
            $('#locations .data-display').append('<li class="linkage" id="p'+index+'">'+$marker.html()+'</li>');

            $(document).on('click', '#p' + index, function() {
                infowindow.open(map, marker);
                setTimeout(function() { infowindow.close(); }, 5000);
            });

            var infowindow = new google.maps.InfoWindow({
                content: $marker.html(),
            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open( map, marker );
            });
        }
    }

    function center_map(map) {
        var bounds = new google.maps.LatLngBounds();
        $.each( map.markers, function( i, marker ){
            var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
            bounds.extend( latlng );
        });

        if( map.markers.length == 1 ) {
            map.setCenter( bounds.getCenter() );
            map.setZoom( 16 );
        } else {
            map.fitBounds( bounds );
        }
    }

    $(document).ready(function(){
        $('#map').each(function(){
            render_map( $(this) );
        });
    });
});

Answer 1

您所描述的内容看起来像是在加载Google Maps API JavaScript之前尝试实例化地图（您在async此处使用属性）。这就是为什么它有时会引发google is not defined错误。

换句话说，document.ready在https://maps.googleapis.com/maps/api/js?key=MYKEY被加载之前被调用。

Google Maps API允许您callback在URL中使用参数，并在API完全加载后调用该函数的名称。请参阅https://developers.google.com/maps/documentation/javascript/tutorial。

因此，在您的情况下，您将使用如下网址：

https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap

然后初始化地图：

initMap() {
    var map = new google.maps.Map($el[0], args);
}