Загрузка нескольких карт 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

Чтобы улучшить скорость загрузки страницы вы можете (должны) сделать несколько вещей.

Загрузите API асинхронной DOCUMENTATION HERE
только инициализацию карты, когда они видны в окне проекции Поэтому вы можете использовать плагины LIKE THIS
место Также ваш JS скрипт всегда в нижней части тела тега. Таким образом, все содержимое загружается, и javascript не будет отрицать загрузку содержимого.

Это должно реально увеличить загрузку страницы. Я сделал это по нескольким проектам, и все работает отлично!

источник

2014-09-17 21:15:29

Загрузка нескольких карт Google на одной странице

ответ

Смежные вопросы