1ページに複数のGoogle APIマップを読み込む方法を最適化する方法

Question

同じページに100個の地図を表示し、各ページにマーカーを1つずつ、マップごとに平均5つのマーカーを配置します。しかし、ページを読み込むときには、Googleマップが読み込まれるまでに1分ほどかかります。ここに私が今持っているコードはありますが、マップをローダーに素早く手に入れる方法がわかりません。

window.onload = function() { 
     initialize(); 
       } 
      var coords = [ 
      {lat: 40.88589, lng: -73.892110, zoom: 10} 
     ]; 
    var maps = []; 

    var markers = [ 
     MARKER DATA IN HERE  

    ]; 

    var counter=100; 

    function initialize() { 
for(var i = 0, length = counter; i < length; i++) 
{ 
    var point = coords; 
    var latlng = new google.maps.LatLng(point.lat, point.lng); 

    maps[i] = new google.maps.Map(document.getElementById('map-canvas' + (i + 1)), { 
     zoom: point.zoom, 
     center: latlng, 
         mapTypeId: google.maps.MapTypeId.ROADMAP 

    });  
var infoWindow = new google.maps.InfoWindow(); 




    for (var j = 0; j < markers.length; j++) { 
     var data = markers[j]; 
     if(data.Rank==(i+1)){ 
     var myLatlng = new google.maps.LatLng(data.lat, data.lng); 
     var marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: maps[i], 
      title: data.officer 
     }); 

     //Attach click event to the marker. 
     (function (marker, data) { 
      google.maps.event.addListener(marker, "click", function (e) { 
       //Wrap the content inside an HTML DIV in order to set height and width of InfoWindow. 
       infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.officer + "</div>"); 
       infoWindow.open(maps[i], marker); 
      }); 
     })(marker, data); 
     } 
    } 

    } 

}

Answer 1

〜100枚のJavaScriptマップを初期化すると、低速/あまりにも非効率的であるならば、私はスタティックマップAPIを起動してみます[1]とマーカーを表示しますがへの動的でない静止画像を読み込みますページの読み込みを素早く行うことができます。

非同期的に、ユーザーがこれらのマップのいずれかと対話する準備ができていることを検出すると、静的マップを動的JavaScriptマップで置き換えることができます。

あなたはもっと巧みになり、ユーザーに見える地図だけを読み込むこともできます。一度に上位20個の地図しか表示されず、残りの部分を見るためにスクロールしなければならない場合は、最初の40個の地図をロードするだけで、ユーザーがスクロールしてもコンテンツを読み込むことができますコウモリから100枚右にマップ。

[1] https://developers.google.com/maps/documentation/static-maps/intro