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参数，其中包含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);
}

谷歌映射v3 API仅在刷新后进行加载/身份验证变得非常慢

1 个答案: