Question

我在网站上集成Google Maps API v3时遇到了一些问题。这是我的代码：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=xxxx&sensor=true"></script><script>
var map;
function initialize() {
var mapOptions = {
  center: new google.maps.LatLng(<?php echo $lat;?>,<?php echo $lng;?>),
  //center: new google.maps.LatLng(32.295439,-64.7795),
  zoom: 17,
  mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);
var lL = new google.maps.LatLng(xxx,xxx);
var marker = new google.maps.Marker({
      position: lL,
      map: map
  });
alert('map loaded')
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

大多数情况下，警报和地图正确显示。有时显示警报，但地图不显示。有时警报和地图都不会显示。不会记录任何错误消息。

以下是一个示例：bermudareservation.com/lodgings/sea-song/

我在所有浏览器中对此进行了测试，并显示了相同的行为。我正在使用WP，所以我尝试使用插件，但同样的事情发生了。

如何确保每次用户查看页面时都会加载地图？

更新：

我摆脱了监听器，但这造成了一个新问题：有时内容永远不会加载，加载动画无限期地播放。发生这种情况时会输出此错误：

Uncaught ReferenceError: google is not defined

我无法将其跟踪到行号，因为出于某种原因我无法在调试工具上看到javascript。

Answer 1

我已经尝试了大约15次，每次加载地图。

但是需要一些时间，地图将加载onload（加载所有资源时），20-25秒后对我来说是什么

首先，您应优化页面以加快加载时间，例如有多个图像，大小> 1MB，最大2.8MB！，我会说这对网页来说是不可取的。保存这些图像缩放到所需的大小，压缩后应将大小减小到原始

的10％

此页面加载数据的完整大小约为20MB 。

此外，您无需等待load - 事件，请立即致电initialize。通常会加载地图onload以确保地图容器已知，但在您的页面中容器已知，因为初始化地图的脚本放在地图容器之后。

一般情况下，我建议您访问http://yslow.org/了解效果指南

确保加载谷歌地图

1 个答案: