Defer Attribut funktioniert nicht mit Google Maps API?

Question

Ich versuche sicherzustellen, dass die Google-Karte das letzte ist, was auf der Seite geladen wird und die Leistung der Seite nicht negativ beeinflusst.

Wenn das defer-Attribut wird gesetzt, nachdem ... Sensor = false“, wird die Karte nicht angezeigt. Was ist der beste Weg, um das Zurückstellungs Attribut mit Google Maps zu benutzen? Ist das überhaupt möglich?

<div id="map-canvas"></div> 
     <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false" defer></script> 
     <script defer> 
      function initialize() { 
       var mapOptions = { 
        center: new google.maps.LatLng(37.7599446, -122.4212681), 
        zoom: 12, 
        panControl: false, 
        disableDefaultUI: true, 
        scrollwheel: false, 
        mapTypeControl: false, 
        mapTypeControlOptions: { 
         style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR 
        }, 
        panControlOptions: { 
         position: google.maps.ControlPosition.LEFT_CENTER 
        }, 
        zoomControl: true, 
        zoomControlOptions: { 
         position: google.maps.ControlPosition.LEFT_CENTER 
        }, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 

       var map = new google.maps.Map(document.getElementById("map-canvas"), 
        mapOptions); 

       var marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(37.7599446, -122.4212681), 
        map: map, 
        title: '805 Valencia St. San Francisco, CA' 
       }); 
       var contentString = '<div id="map-content">' + 
        '<div id="siteNotice">' + 
        '</div>' + 
        '<h1 id="firstHeading" class="firstHeading">805 Valencia St.<br>San Francisco, CA</h1>' + 
        '<div id="bodyContent">' + 
        '' + 
        '<ul class="email-list"><li>info@yourbetty.com</li><li>support@yourbetty.com</li><li>press@yourbetty.com</li></ul>' + 
        '</div>' + 
        '</div>'; 

       var infowindow = new google.maps.InfoWindow({ 
        content: contentString, 
        maxWidth: 330 
       }); 

       google.maps.event.addListener(marker, 'click', function() { 
        infowindow.open(map, marker); 
       }); 

      } 

      google.maps.event.addDomListener(window, 'load', initialize); 
     </script> 

Answer 1

wenn Sie verschieben verwenden Sie die asynchrone Version der API verwenden müssen:

<script defer 
    src="http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"> 
</script> 

Das Problem:
, wenn Sie 0 verwendenDas Skript wird geladen, wenn das Dokument geschlossen wird - der Inhalt wurde geladen. Außerdem werden externe Skripte nach Inline-Skripten geparst.

Dies hat zwei Nebenwirkungen auf Ihre Implementierung bezogen werden:

1. Sie können nicht die synchrone Version der API verwenden, da es die Verwendung von document.write macht, die verwendet werden können, nicht nach das Dokument wurde

   geschlossen

2. der Anruf:

   google.maps.event.addDomListener(window, 'load', initialize); 
   

   ... kommt an einem Punkt wHE re ist die Maps-API noch nicht geladen, google ist nicht definiert, initialize wird nie ausgeführt.