谷歌地图V3 API只在刷新/加载后很慢

Question

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

的API上的键启用：

• 谷歌地图路线API
• 谷歌地图距离矩阵API
• 谷歌地图海拔API
• 谷歌地图地理编码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。
• 不使用异步或推迟。
• 将特定的网址添加到我的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

你描述的样子，你尝试加载谷歌地图API的JavaScript之前实例地图（你使用async属性有）。这就是为什么它有时会抛出google is not defined错误。

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

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); 
}