Google Maps API에서는 Defer 속성이 작동하지 않습니까?
-
21-12-2019 - |
문제
Google지도가 페이지에로드되고 부정적으로 페이지의 성능에 영향을 미치지 않는 것을 확인하려고합니다.
DEFER= FALSE (SENSER= FALSE)의 속성이 배치되면 맵이 나타나지 않습니다. Google지도를 사용하여 연기 속성을 사용하는 가장 좋은 방법은 무엇입니까?
<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>
. 해결책
연기를 사용할 때 API의 비동기 버전을 사용해야합니다.
<script defer
src="http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize">
</script>
.
문제 :
defer
를 사용할 때 문서가 닫히면 스크립트가로드됩니다. 콘텐츠가로드되었습니다.또한 외부 deffered 스크립트가 인라인 DEFFERRED 스크립트 후에 구문 분석됩니다.
이는 구현과 관련된 두 개의 부작용이 있습니다 :
-
문서가 닫힌 후에 사용할 수없는
document.write
를 사용하기 때문에 API의 동기 버전을 사용할 수 없습니다. -
통화 :
.google.maps.event.addDomListener(window, 'load', initialize);
... MAPS-API가 아직로드되지 않은 지점에서 OPENACODICETAG 코드가 정의되지 않았으며 초기화되지 않습니다.
제휴하지 않습니다 StackOverflow