谷歌地圖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); 
}