Google지도 용 렌더링 차단 JavaScript를 제거하십시오

Question

PageSpeed Insights는 Google지도 JS의 렌더링 차단을 제거하는 것이 나에게 보여줍니다. CMS 콘텐츠가 추가되었으며 코드입니다.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=myipcode">// <![CDATA[

// ]]></script>
<script type="text/javascript">// <![CDATA[
function initialize() {
  var myLatlng = new google.maps.LatLng(mycoord1, mycoord2);
  var mapOptions = {
    zoom: 17,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'My Title'
  });
}

.

google.maps.event.adddomlistener (창, '로드', 초기화); //]>

에 async="async"를 추가하면 맵이로드되지 않지만 pageSpeed의 메시지가 켜집니다.내가 무엇을해야합니까?

Answer 1

다음을 시도하십시오

<div id="map"></div>

<script type="text/javascript">
function initializeMap() {
  var myLatlng = new google.maps.LatLng(mycoord1, mycoord2);
  var mapOptions = {
    zoom: 17,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'My Title'
  });
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=myipcode&callback=initializeMap"
        async defer></script>

.

나머지 후에 외부 스크립트 태그를 배치하는 것이 중요하므로 콜백 할 것이 있습니다.또한, 비동기를 사용하면 콜백 메소드를 초기화 할 수 있도록 콜백 메소드를 추가해야합니다.

initialize가 예쁜 일반적인 것처럼 메서드 이름으로 Advies를 조언하며 다른 곳에서 사용될 수 있습니다