javascript - 如何优化在一个页面上加载多个 Google API map

Question

我将在同一页面上发布 100 张 map ，每页上都有一些标记，平均每张 map 有 5 个标记。然而，加载页面时，谷歌地图加载需要近一分钟的时间。这是我现在拥有的代码，我只是不确定如何更快地将 map 加载到加载程序。

 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 map 效率太低/太慢，我会尝试从静态 map API [1] 开始并加载显示标记但不是动态的静态图像，以提供快速加载页面的外观。

异步地，也许当您检测到用户准备与这些 map 之一进行交互时，您可以将静态 map 替换为动态 JavaScript map 。

您甚至可以变得更聪明，只加载用户可见的 map 。如果您一次只看到前 20 个 map ，并且用户必须滚动才能看到其余 map ，那么也许只加载前 40 个 map 才有意义，这样用户滚动时就会有内容，但您不会浪费时间加载立即就有 100 张 map 。

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