延期属性不适用于Google Maps API？ [英] Defer attribute doesn't work with Google Maps API?

问题描述

我试图确保Google地图是网页上加载的最后一件东西，并且不会负面影响页面的性能。

当defer属性放置在... sensor = false后面时，地图不会出现。使用Google地图的defer属性的最佳方式是这甚至有可能吗？

 < div id =map-canvas>< / div> 
< ; script src =http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=falsedefer>< / script> 
< script defer> 
 function初始化（）{
 var mapOptions = {
 center：new google.maps.LatLng（37.7599446，-122.4212681），
 zoom：12，
 panControl：false，
 disableDefaultUI：true，
 scrollwheel：false，
 mapTypeControl：false，
 mapTypeControlOptions：{$ b $ style：google.maps.MapTypeControlStyle.HORIZONTAL_BAR 
}， 
 panControlOptions：{
位置：google.maps.ControlPosition.LEFT_CENTER 
}，
 zoomControl：true，
 zoomControlOptions：{
位置：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，
标题：'805 Valencia St. San Francisco，CA'
}）; 
 var contentString ='< div id =map-content>'+ 
'< div id =siteNotice>'+ 
'< / div>' + 
'< h1 id =firstHeadingclass =firstHeading> 805 Valencia St.< br>< / h1>'+ 
'< div id = bodyContent>'+ 
''+ 
'< ul class =email-list>< li> [e-mail]< / li>< li> support @ yourbetty .com< / li>< li> [e-mail]< / 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> 
  

解决方案

API的异步版本：

 < script defer 
 src =http：// maps .googleapis.com /地图/ API / JS传感器=假安培;回调=初始化> 
< / script> 
  

问题：使用 $ b时， code> defer 脚本将在文档关闭时加载 - 内容已被加载。此外，外部缓存脚本将在内联缓存脚本后进行解析。

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

1. 不能使用API​​的同步版本，因为它使用 document.write
$ b

pre> google.maps.event.addDomListener（window，'load'，initialize）;


...此时地图API尚未加载， google 未定义，初始化将永远不会执行。




I'm trying to make sure the Google map is the last thing that loads on the page and doesn't affect the performance of the page negatively.

When the defer attribute is placed after ...sensor=false", the map does not appear. What's the best way to use the defer attribute with Google maps? Is this even 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>[e-mail]</li><li>[e-mail]</li><li>[e-mail]</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>

解决方案

When you use defer you must use the asynchronous version of the API:

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

The issue:
when you use defer the script will be loaded when the document is closed- the content has been loaded. Furthermore external deffered scripts will be parsed after inline defferred scripts.

This has two side-effects related to your implementation:

1. you can't use the synchronous version of the API, because it makes use of document.write , which can't be used after the document has been closed

2. the call :

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

   ...comes at a point where the Maps-API isn't loaded yet, google is undefined, initialize will never be executed.

这篇关于延期属性不适用于Google Maps API？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！