다른 모든 항목을로드 한 후 Google지도로드

Question

Google지도 자바 스크립트 API로 내 웹 사이트에서 일부 클라우드 글꼴을 사용하고 있습니다.

JS :

모든 것이로드 완료 후 나는, 내가 처음 body 태그를 숨기고 다음을로드 할 몇 가지 기본적인 코드를 넣었습니다 설정 한 클라우드 글꼴로 "변환"글꼴을 보여주는 방지하려면 :

$(window).on('load', function() { 
    $("body").fadeIn('fast'); 
}); 

CSS :

body { 
    display: none; 
} 

코드는 독자적으로 잘 작동하지만 문제는 Google지도를 올바르게로드하는 것입니다. 이 fiddle에서 볼 수 있듯이지도가 제대로로드되지 않습니다. 지도 코드는 자체적으로 잘 작동합니다.

Google지도와 함께로드 기능에서 창을 사용하여 제대로 작동하려면 어떻게해야합니까?

Answer 1

대상 (#map)이 숨겨져 있으면 google지도가로드되지 않는 것 같습니다.

일단 대상이 표시되면 맵의 크기 조정 이벤트를 트리거하여 문제를 해결할 수 있지만 센터를 원하는 위치 (위도/경도)로 다시 이동해야합니다.

google.maps.event.trigger(map, 'resize'); 
map.setCenter({lat: -34.397, lng: 150.644}); // from OP's fiddle 

업데이트 바이올린 : https://jsfiddle.net/Lfq1negw/1/