Javascript 如何提高谷歌地图加载时间？

我的网站有很多页面，上面显示了一个带有一堆标记的谷歌地图

正如你所看到的，地图需要很长时间才能加载，我正在寻找改进的方法。我本来希望使用缓存服务器上的地图分幅，但我被告知，这将违反谷歌地图的使用条款

下面是我用来显示地图和添加标记的代码。Google Maps V3 JavaScript API的使用非常简单，所以我认为没有太多的优化空间。是否有任何明显的步骤可以减少地图加载时间

SF.Map = function(elementId, zoomLevel, center, baseImageDir) {

    this._baseImageDir = baseImageDir;
    var focalPoint = new google.maps.LatLng(center.latitude, center.longitude);

    var mapOptions = {
        streetViewControl: false,
        zoom: zoomLevel,
        center: focalPoint,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };

    this._map = new google.maps.Map(document.getElementById(elementId), mapOptions);
    this._shadow = this._getMarkerImage('shadow.png');
};

SF.Map.prototype._getMarkerImage = function(imageFile) {
    return new google.maps.MarkerImage(this._baseImageDir + '/map/' + imageFile);
};


SF.Map.prototype._addField = function(label, value) {
    return "<span class='mapField'><span class='mapLabel'>" + label + ": </span><span class='mapValue'>" + value + "</span></span>";
};

/**
 * Add a marker to the map
 * @param festivalData Defines where the marker should be placed, the icon that should be used, etc.
 * @param openOnClick
 */
SF.Map.prototype.addMarker = function(festivalData, openOnClick) {

    var map = this._map;
    var markerFile = festivalData.markerImage;

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(festivalData.latitude, festivalData.longitude),
        map: map,
        title: festivalData.name,
        shadow: this._shadow,
        animation: google.maps.Animation.DROP,
        icon: this._getMarkerImage(markerFile)
    });

    var bubbleContent = "<a class='festivalName' href='" + festivalData.url + "'>" + festivalData.name + "</a><br/>";
    var startDate = festivalData.start;
    var endDate = festivalData.end;

    if (startDate == endDate) {
        bubbleContent += this._addField("Date", startDate);

    } else {
        bubbleContent += this._addField("Start Date", startDate) + "<br/>";
        bubbleContent += this._addField("End Date", endDate);
    }

    // InfoBubble example page http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html
    var infoBubble = new InfoBubble({
        map: map,
        content: bubbleContent,
        shadowStyle: 1,
        padding: 10,
        borderRadius: 8,
        borderWidth: 1,
        borderColor: '#2c2c2c',
        disableAutoPan: true,
        hideCloseButton: false,
        arrowSize: 0,
        arrowPosition: 50,
        arrowStyle: 0
    });

    var mapEvents = google.maps.event;

     // either open on click or open/close on mouse over/out
    if (openOnClick) {

        var showPopup = function() {
            if (!infoBubble.isOpen()) {
                infoBubble.open(map, marker);
            }
        };
        mapEvents.addListener(marker, 'click', showPopup);

    } else {

        mapEvents.addListener(marker, 'mouseover', function() {
            infoBubble.open(map, marker);
        });

        mapEvents.addListener(marker, 'mouseout', function() {
            infoBubble.close();
        });
    }
};

SF.Map=function（elementId、zoomLevel、center、baseImageDir）{
这是._baseImageDir=baseImageDir；
var focalPoint=new google.maps.LatLng（中心.纬度，中心.经度）；
变量映射选项={
街景控制：错误，
zoom:zoomLevel，
中心：焦点，
mapTypeId:google.maps.mapTypeId.ROADMAP，
mapTypeControl:false
};
this.\u map=new google.maps.map（document.getElementById（elementId），mapOptions）；
this._shadow=this._getMarkerImage（'shadow.png'）；
};
prototype.\u getMarkerImage=函数（imageFile）{
返回新的google.maps.MarkerImage（this._baseImageDir+'/map/'+imageFile）；
};
SF.Map.prototype.\u addField=函数（标签、值）{
返回“+label+”：“+value+”；
};
/**
*在地图上添加一个标记
*@param festivalData定义标记应放置的位置、应使用的图标等。
*@param openOnClick
*/
SF.Map.prototype.addMarker=函数（节日数据，openOnClick）{
var map=此。_map；
var markerFile=festivalData.markerImage；
var marker=new google.maps.marker({
位置：新的google.maps.LatLng（festivalData.latitude，festivalData.longitude），
地图：地图，
标题：FesticalData.name，
影子：这个，
动画：google.maps.animation.DROP，
图标：此。\u getMarkerImage（markerFile）
});
var bubbleContent=“
”；
var startDate=festivalData.start；
var endDate=festivalData.end；
如果（开始日期==结束日期）{
bubbleContent+=此地址字段（“日期”，起始日期）；
}否则{
bubbleContent+=此地址字段（“开始日期”，开始日期）+“
”；
bubbleContent+=此地址字段（“结束日期”，结束日期）；
}
//InfoBubble示例页面http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html
var infoBubble=新的infoBubble({
地图：地图，
内容：气泡内容物，
阴影风格：1，
填充：10，
边界半径：8，
边框宽度：1，
边框颜色：“#2c2c”，
是的，
hideCloseButton:false，
箭头大小：0，
箭头位置：50，
箭头样式：0
});
var mapEvents=google.maps.event；
//单击打开或鼠标悬停打开/关闭
if（openOnClick）{
var showPopup=函数（）{
如果（！infoBubble.isOpen（））{
打开（地图、标记）；
}
};
addListener（标记“单击”，显示弹出窗口）；
}否则{
addListener（标记'mouseover'，函数（）{
打开（地图、标记）；
});
addListener（标记'mouseout'，函数（）{
infoBubble.close（）；
});
}
};

一个选项是拍摄静态快照并在其后面创建地图。地图完全加载后，用静态地图替换动态地图

我还建议您看看：

您可以为您的站点提供一个更简单的解决方案，而无需使用完整的动态地图api。

您可以尝试“延迟加载”google地图，如下所示：

var script=document.createElement("script");
script.type="text/javascript";
script.async=true;
script.src="http://maps.google.com/maps/api/js?sensor=false&callback=handleApiReady";
document.body.appendChild(script);

或者甚至像这样，这就是我为Facebook AIP所做的，这样就不会减慢初始加载时间

$.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() { 
           FB.init({appId: opt.facebook_id, status: true, cookie: true, xfbml: true}); 
}); 

例如：

---

同时看看你的HTML，你有很多JS，它们应该在一个外部JS文件中，而不是内联，你不能传递一个数组，而不是有很多重复的内联代码。

我不能使用静态映射，因为它不支持标记事件。当你将鼠标移到标记上时，我的地图会弹出一个关于节日信息的弹出窗口。这正是我对所有地图所做的。效果很好。我还没有尝试过，但我怀疑用动态映射替换静态映射会在视觉上产生不和谐。一些JS是内联的，因为它（部分）是在服务器端生成的。您可以将内联JS放在其他文件中，并以同样的方式加载它。