javascript 在网站中加载谷歌地图的最佳方式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5299393/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
optimal way of loading google maps in website
提问by raklos
I'm using Google Maps v3 and want it to load faster.
我正在使用 Google Maps v3 并希望它加载得更快。
My setup:
我的设置：
At the end of a .js file
在 .js 文件的末尾
google.maps.event.addDomListener(window, 'load', initialize);
And at end of the HTML page code:
在 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>
How can I make the map appear on screen quicker?
如何让地图更快地出现在屏幕上？
回答by Haochi
You don't need to include both of these scripts:
您不需要同时包含这两个脚本：
<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>
especially if you only using Google Maps. If you are using more than one of these Google APIs(or these JavaScript libraries), include only http://www.google.com/jsapi. Otherwise, if you are only using Google Maps, include only http://maps.google.com/maps/api/js?sensor=false. This along will save one request.
特别是如果您只使用谷歌地图。如果您使用多个这些 Google API（或这些JavaScript 库）中的一个，请仅包含http://www.google.com/jsapi. 否则，如果您仅使用 Google 地图，则仅包含http://maps.google.com/maps/api/js?sensor=false. 这将保存一个请求。
You can't really make the maps load quicker, but one of the tricks you can do is load a static map first using Google Map's Static Maps APIso it will appear to load faster.
您无法真正让地图加载得更快，但您可以做的一个技巧是首先使用 Google Map 的静态地图 API加载静态地图，这样它看起来会加载得更快。
Another trick is to load the maps only when the user asks for it. However, without knowing what your site's requirement is, it's hard to tell. With the Google library loader, you can do
另一个技巧是仅在用户要求时加载地图。但是，在不知道您的站点的要求是什么的情况下，很难说。使用谷歌库加载器，你可以做到
google.load("maps", "3", {other_params:'sensor=false', callback: function(){
var map; // initialize your map in here
});
or if you are not using the library loader, you can do this.
或者，如果您不使用库加载器，则可以执行此操作。
回答by rsplak
you can add an eventlistener to a button and dynamically create and fill a new iframe with the map as a content? This way the map will not be loaded untill the button has been clicked.
您可以将事件侦听器添加到按钮并使用地图作为内容动态创建和填充新 iframe 吗？这样，在单击按钮之前不会加载地图。
var map = YOUR GOOGLE MAPS MINIMAP SRC;
$('#button').bind('click', function() {
if($('#iframe').size == 0) {
$('#iframe').load(map, function() {
$('#button').unbind('click');
});
}
});
Of course you'll have to style the iframe and position it right, this is just an idea.
当然，您必须设置 iframe 的样式并将其定位正确，这只是一个想法。
