Attribut aufschieben funktioniert nicht mit Google Maps API?

Question

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

Wenn das Attribut defer danach platziert wird ...sensor = false", die Karte wird nicht angezeigt.Was ist der beste Weg, um das Attribut defer mit Google Maps zu verwenden?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 defer verwenden, müssen Sie die asynchrone Version der API verwenden:

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

Problem:
wenn Sie verwenden defer das Skript wird geladen, wenn das Dokument geschlossen wird - der Inhalt wurde geladen.Außerdem werden externe abweichende Skripte nach inline abweichenden Skripten analysiert.

Dies hat zwei Nebenwirkungen im Zusammenhang mit Ihrer Implementierung:

1. sie können die synchrone Version der API nicht verwenden, da sie Folgendes verwendet document.write , die nach dem Schließen des Dokuments nicht mehr verwendet werden können

2. Anruf :

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

   ...kommt an einem Punkt, an dem die Maps-API noch nicht geladen ist, google ist undefiniert, wird initialize niemals ausgeführt.