在網站上加載谷歌地圖的最佳方式

Question

我正在使用谷歌地圖v3，並希望它加載更快。

我的設置：

在.js文件的末尾

google.maps.event.addDomListener(window, 'load', initialize);

並在HTML頁面代碼的末尾：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

如何讓地圖更快地出現在屏幕上？

Answer 1

您不需要包含這兩個腳本：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

特別是如果您只使用谷歌地圖。 如果您使用的是多個Google API （或這些JavaScript庫 ），請僅包含http://www.google.com/jsapi 。 否則，如果您僅使用Google地圖，請僅包含http://maps.google.com/maps/api/js?sensor=false 。 這將保存一個請求。

你無法真正讓地圖加載得更快，但你可以做的一個技巧是首先使用谷歌地圖的靜態地圖API加載靜態地圖，這樣它的加載速度會更快。

另一個技巧是僅在用戶請求時加載地圖。 但是，如果不知道您網站的要求是什么，就很難說清楚。 使用Google庫加載器，您可以做到

google.load("maps", "3", {other_params:'sensor=false', callback: function(){
  var map; // initialize your map in here
});

或者如果您沒有使用庫加載器，則可以執行此操作 。

Answer 2

您可以將eventlistener添加到按鈕，並使用地圖作為內容動態創建和填充新的iframe嗎？ 這樣就不會加載地圖，直到單擊按鈕。

var map = YOUR GOOGLE MAPS MINIMAP SRC;
$('#button').bind('click', function() {
    if($('#iframe').size == 0) {
        $('#iframe').load(map, function() {
            $('#button').unbind('click');
        });
    }
});

當然你必須設置iframe的樣式並將其定位，這只是一個想法。