한 페이지에 여러 개의 Google지도로드

한 페이지에 여러 개의 Google지도를로드하려고하지만 페이지 로딩 시간이 매우 깁니다. 페이지 로딩 시간을 단축하는 방법은 무엇입니까?한 페이지에 여러 개의 Google지도로드

예제 HTML 코드는 다음과 같습니다. 실제로 Google지도 아래에 루프가 만들어지고 숫자는 최소 100 개가됩니다.

<!DOCTYPE html> 
<html> 
<head>   
</head> 

<body>   
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script> 

    <div id="postid_78" style="width:600px;height:150px;"> 
     <script>      
       var mapProp = { 
        center: new google.maps.LatLng('42.5000', '1.5000'), 
        zoom: 5, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       var map = new google.maps.Map(document.getElementById("postid_78"), mapProp); 
       var marker = new google.maps.Marker({ 
        position: new google.maps.LatLng('42.5000', '1.5000'), 
        map: map 
       }); 
     </script>     
    </div> 
    <hr /> 
    <div id="postid_77" style="width:600px;height:150px;"> 
     <script>      
       var mapProp = { 
        center: new google.maps.LatLng('42.5000', '1.5000'), 
        zoom: 5, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       var map = new google.maps.Map(document.getElementById("postid_77"), mapProp); 
       var marker = new google.maps.Marker({ 
        position: new google.maps.LatLng('42.5000', '1.5000'), 
        map: map 
       }); 
     </script>     
    </div> 
    <hr /> 
    <div id="postid_76" style="width:600px;height:150px;"> 
     <script>      
       var mapProp = { 
        center: new google.maps.LatLng('42.5000', '1.5000'), 
        zoom: 5, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       var map = new google.maps.Map(document.getElementById("postid_76"), mapProp); 
       var marker = new google.maps.Marker({ 
        position: new google.maps.LatLng('42.5000', '1.5000'), 
        map: map 
       }); 
     </script>     
    </div> 
    <hr /> 
    <div id="postid_75" style="width:600px;height:150px;"> 
     <script>      
       var mapProp = { 
        center: new google.maps.LatLng('42.5000', '1.5000'), 
        zoom: 5, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       var map = new google.maps.Map(document.getElementById("postid_75"), mapProp); 
       var marker = new google.maps.Marker({ 
        position: new google.maps.LatLng('42.5000', '1.5000'), 
        map: map 
       }); 
     </script>     
    </div> 
    <hr /> 
    <div id="postid_74" style="width:600px;height:150px;"> 
     <script>      
       var mapProp = { 
        center: new google.maps.LatLng('42.5000', '1.5000'), 
        zoom: 5, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       var map = new google.maps.Map(document.getElementById("postid_74"), mapProp); 
       var marker = new google.maps.Marker({ 
        position: new google.maps.LatLng('42.5000', '1.5000'), 
        map: map 
       }); 
     </script>     
    </div> 
    <hr /> 
    <div id="postid_73" style="width:600px;height:150px;"> 
     <script>      
       var mapProp = { 
        center: new google.maps.LatLng('42.5000', '1.5000'), 
        zoom: 5, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       var map = new google.maps.Map(document.getElementById("postid_73"), mapProp); 
       var marker = new google.maps.Marker({ 
        position: new google.maps.LatLng('42.5000', '1.5000'), 
        map: map 
       }); 
     </script>     
    </div> 

</body> 
</html>

출처

2014-09-17 kerabanaga

여러 맵을로드하는 대신 단일 맵에 여러 마커를 추가하는 것이 어떻습니까? –

[100 개의지도가 그다지 길지 않습니다.] (http://jsfiddle.net/q2yd2/4/), 컴퓨터/브라우저에 따라 다릅니다. [이 질문] (http://stackoverflow.com/questions/24919121/adding-multiple-map-canvases-to-window-google-maps-javascript-api-v3/24920602#24920602)에서 수정되었습니다. – geocodezip

여러 개의 맵이 필요합니다. 디자인 룰입니다. – kerabanaga

페이지로드 속도를 향상 시키려면 몇 가지 작업을 수행해야합니다. 그들은 따라서 당신이 사용할 수있는 플러그인 LIKE THIS

는 또한 body 태그의 하단에 항상 JS 스크립트를 배치 뷰포트 에서 볼 때

로드 DOCUMENTATION HERE
asyncron API는 만지도를 초기화합니다. 그래서 모든 콘텐츠가로드되고 자바 스크립트가 콘텐츠로드를 거부하지 않습니다.

이렇게하면 실제로 페이지로드가 증가해야합니다. 여러 프로젝트에서이 작업을 수행했으며 제대로 작동합니다!

출처

2014-09-17 21:15:29

한 페이지에 여러 개의 Google지도로드

답변

관련 문제