¿El atributo de diferencia no funciona con la API de Google Maps?

Question

Estoy tratando de asegurarme de que el mapa de Google sea lo último que se carga en la página y no afecta negativamente al rendimiento de la página.

Cuando el atributo de diferencia se coloca después de ... sensor= falso ", el mapa no aparece. ¿Cuál es la mejor manera de usar el atributo de diferir con Google Maps? ¿Es esto incluso posible?

 <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

Cuando usa aplazamiento, debe usar la versión asíncrona de la API:

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

El problema:
Cuando usa defer, el script se cargará cuando el documento esté cerrado, el contenido se ha cargado.Además, los scripts externos desvergados se analizarán después de los scripts de desagraduras en línea.

Esto tiene dos efectos secundarios relacionados con su implementación:

1. No puede usar la versión síncrona de la API, ya que hace uso de document.write, que no se puede usar después de que el documento haya sido cerrado

2. La llamada:

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

   ... viene en un punto en el que el mapas-API aún no está cargado, google no está definido, la inicialización nunca se ejecutará.