如何优化加载多个谷歌API地图在一个页面上

Question

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

 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