Google Maps v3 API wird nur nach Aktualisierung geladen/Authentifizierung wird sehr langsam

Question

Verwendung von Google Maps v3 API. Wenn ich die Seite mit der Karte besuche bekomme ich manchmal folgenden Fehler: "custom.js:46 Uncaught ReferenceError: google is not defined".

API auf die Taste aktiviert:

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

Wenn ich das neu lade Seite, alles funktioniert gut. Dies funktioniert nicht 100% der Zeit. In einigen Fällen sind mehrere Neuladevorgänge erforderlich.

Ich habe bemerkt, dass, wenn die Karte nicht korrekt geladen wird dieses Skript im Kopf-Tags ausgeführt wird:

<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> 

Nach 10-20 Sekunden dieses Skript geht weg und wenn ich aktualisieren Sie die Seite nach diesem Skript geht weg, meine Map funktioniert einwandfrei.

Dinge, die ich ergebnislos versucht:

• das Skript Putting das API in der Fußzeile zu laden.
• Nicht Async oder Defer verwenden.
• Hinzufügen bestimmter URLs zu meinem API-Schlüssel.
• Nicht einen api Schlüssel

Laden des api Skript im Kopf meiner Seite mit:

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

Mein Skript, um die Karte und Platzmarkierungen auf der Karte zu machen (in der Fußzeile geladen)

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

Was Sie Aussehen beschreiben, wie Sie versuchen, die Karte zu instanziieren, bevor die Google maps API JavaScript geladen wird (Sie verwenden async Attribut gibt). Deshalb wirft es manchmal google is not defined Fehler.

Mit anderen Worten, document.ready wird aufgerufen, bevor https://maps.googleapis.com/maps/api/js?key=MYKEY geladen wird.

Google Maps-API ermöglicht die Verwendung des Parameters callback in der URL mit dem Namen einer Funktion, die aufgerufen wird, nachdem die API vollständig geladen wurde. Siehe https://developers.google.com/maps/documentation/javascript/tutorial.

in Ihrem Fall So werden Sie URL wie verwenden:

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

Und dann die Karte initialisieren:

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