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

Question

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

在密钥上启用 API：

• Google 地图路线 API
• Google 地图距离矩阵 API
• Google 地图高程 API
• Google 地图地理编码 API
• 谷歌地图 JavaScript API

当我重新加载页面时，一切正常。这在 100% 的情况下都不起作用。在某些情况下需要多次重新加载。

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

<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 的脚本放在页脚中。
• 不使用异步或延迟。
• 将特定 url 添加到我的 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 允许您在 URL 中使用 callback 参数以及在 API 完全加载后调用的函数的名称。见https://developers.google.com/maps/documentation/javascript/tutorial。

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

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

然后初始化地图：

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