Attribut Defer ne fonctionne pas avec l'API Google Maps?

Question

Je suis en train de assurez-vous que la carte de Google est la dernière chose que les charges sur la page et de ne pas affecter les performances de la page négativement.

Lorsque l'attribut defer est placé après ...sensor=false", la carte ne s'affiche pas.Quelle est la meilleure façon d'utiliser l'attribut defer avec Google maps?Est-ce même possible?

 <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

Lorsque vous utilisez reporter vous devez utiliser la version asynchrone de l'API:

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

Le problème:
lorsque vous utilisez defer le script sera chargé lorsque le document est fermé - le contenu a été chargé.En outre externe différés scripts seront analysés après inline différée scripts.

Cela a deux effets secondaires liés à votre application:

1. vous ne pouvez pas utiliser la version synchrone de l'API, car il rend l'utilisation de document.write qui ne peut pas être utilisé après que le document a été fermé

2. l'appel :

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

   ...arrive à un point où les Cartes de l'API n'est pas encore chargé, google n'est pas défini, initialiser ne sera jamais exécutée.