2009-05-17 5 views
11

Google지도 API를 사용하여 특정 페이지에지도를 표시하고 있습니다.Google지도 API - 자바 스크립트로드가 느림

http://maps.google.com/maps?file=api..... 파일은 브라우저의 파일 대기 시간을 잠그기 때문에 나머지 JavaScript가 처음에는 문서 준비가 완료 될 때까지 거의로드되지 않기 때문에 매우 느리게로드됩니다. Google.

JavaScript 파일을 <head> 태그에서 내 콘텐츠로 이동하려고했습니다. 그러나 브라우저가 Google에서 파일을 기다리기 때문에 나머지 JavaScript는 실행되지 않습니다.

이 문제를 해결할 수있는 방법이 있습니까? 최근에 시작되어 왜 그럴지 모릅니다. 사람이 관심이 있다면

, 내 코드입니다 :

<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAa24xicak8_ghHX58i7La7hRFh9iM79SNC94rOejOtdMRvQmJiBS6Uv5F_1BNSh9ZuSzFXyekHISgew"> </script> 
<script type="text/javascript" src="/js/maps.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    // Google Maps 
    initialize(); 

    // Other JavaScript comes here.... 

    }); 
</script> 

나는 즉시

http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAa24xicak8_ghHX58i7La7hRFh9iM79SNC94rOejOtdMRvQmJiBS6Uv5F_1BNSh9ZuSzFXyekHISgew 

파일로드에 액세스하는 경우.

+7

Firebug를 사용하고 있습니까? 맵 파이어와 함께 작업 할 때 파이어 버그가 내 앱의 성능을 저하시키는 것을 발견했습니다. 파이어 버그없이 브라우저에서 페이지를 보면 괜찮 았습니다. –

+0

나는 파이어 폭스와 localhost에 대해서 같은 일을 보았습니다. IE와 Chrome은 정상적으로 작동합니다. – RichH

+0

파이어 버그를 사용하여 디버깅하고 있습니다. 나는 그것을 끄고 그것이 도움이되는지보기 위하여 시도 할 수있다. – janhartmann

답변

16

이것은 다소 오래된 질문입니다. 해결책은 방화 광을 차단하는 것입니다 (적어도 나를 위해).

+2

예, 나 또한 FF와 IE9에서 모두 조사 중이었고 FF9의 Firebug와 IE9의 개발자 도구를 닫으면지도가로드되었습니다. – Adil

3

JavaScript 최적화의 경우 : 항상 JS를 Maps API 스크립트의 맨 아래에 배치하십시오. 어떤 JS를 머리에 쓰는 좋은 이유가 있는지 나는 정말로 생각할 수 없다.

+0

Google지도 API를 사용하고 있거나 require.js를 사용하는 경우이 두 가지 모두 낡은 앱이지만 맨 위에 올 것을 권장합니다. – skaterdav85

+1

두 가지 모두의 하단에 문제가 없었습니다. –

+0

자바 스크립트를 맨 아래에두면 페이지가 렌더링 될 때까지 실행되지 않으므로 여러 가지 시나리오에서 바람직하지 않습니다. – Muhd

12

Google의 Ajax API를 사용하십시오. 과거에는 JavaScript API를 통해 모든 Google 서비스에 액세스 할 수있었습니다. 모듈 식 시스템이므로 JSAPI 라이브러리 만 포함하면 필요한 모듈을 동적으로로드 할 수 있으므로 사이트가 차단되지는 않습니다.

<script type="text/javascript"   
     src="http://www.google.com/jsapi?key=ABCDEFG"></script> 
<script type="text/javascript"> 
google.load("maps", "2"); 
google.setOnLoadCallback(function() { 
    // Your logic goes here. 
    // It will be run right after the maps module was loaded. 
}); 
</script> 

자세한 내용은 JSAPI's developer documentation을 참조하십시오.