如何提高谷歌地圖加載時間？

Question

我的網站有許多頁面顯示帶有一堆標記的Google地圖，here's an example。

正如你所看到的，地圖需要很長時間來加載，我正在尋找方法來改善這一點。我希望使用GeoWebCache來緩存服務器上的地圖圖塊，但我被告知這會違反Google地圖的使用條款。

下面附加了我用來顯示地圖並添加標記的代碼。這是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(); 
     }); 
    } 
}; 

Answer 1

一種選擇是拍攝靜態快照並在其後面創建地圖。一旦地圖完全加載，用靜態地圖替換動態地圖。

我也建議你看看： https://developers.google.com/maps/documentation/staticmaps/

它可能是你可以提供一個簡單的解決方案到您的網站，而無需使用完整的動態地圖API。

Answer 2

你可以嘗試「懶加載」的谷歌地圖，這樣的事情：

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}); 
}); 

例子：http://blog.rotacoo.com/lazy-loading-instances-of-the-google-maps-api

而且看你的HTML你有很多JS的應該是在外部JS文件，而不是內聯，你能不能傳遞一個陣列，而不是有很多重複的內聯代碼。