在网站上加载谷歌地图的最佳方式

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的样式并将其定位，这只是一个想法。