延迟属性不适用于 Google Maps API？答案

【问题标题】：Defer attribute doesn't work with Google Maps API?延迟属性不适用于 Google Maps API？
【发布时间】：2014-03-28 19:19:46
【问题描述】：

我正在努力确保 Google 地图是页面上最后加载的内容，并且不会对页面的性能产生负面影响。

当 defer 属性放在 ...sensor=false" 之后时，地图不会出现。在 Google 地图中使用 defer 属性的最佳方法是什么？这甚至可能吗？

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

【问题讨论】：

标签： javascript html performance google-maps deferred

【解决方案1】：

当您使用 defer 时，您必须使用 API 的异步版本：

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

问题：
当您使用defer 时，脚本将在文档关闭时加载 - 内容已加载。此外，外部延迟脚本将在内联延迟脚本之后进行解析。

这有两个与您的实施相关的副作用：

你不能使用同步版本的API，因为它使用了document.write，关闭文档后就不能使用了
电话：
```
google.maps.event.addDomListener(window, 'load', initialize); 
```
...出现在 Maps-API 尚未加载的地方，google 未定义，initialize 将永远不会执行。

【讨论】：