谷歌地图 v3 api 地图没有完全加载答案

【问题标题】：Google maps v3 api Map doesnt fully load谷歌地图 v3 api 地图没有完全加载
【发布时间】：2015-01-16 19:39:30
【问题描述】：

我正在构建一个应用程序，其中包含显示附近餐馆的地图。

地图显示出来，但加载时间很长，而且从未真正完全加载。

我已经到了最后期限，我尝试了各种解决方案，但都没有成功。

请大家帮忙！！！

见下面的代码：

    <!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Food & Drink</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>


<body>
  <div id="map" style="width: 360px; height: 300px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Little Shebas', 39.833691, -84.892375, 1],
      ['Roscoes Coffee Bar & Tap Room', 39.833891, -84.892130, 2],
      ['Ullerys Homemade Icecream', 39.834401, -84.889190, 3],
       ['Firehouse BBQ and Blues', 39.833630, -84.891887, 4],
      ['Tin Lizzie Cafe', 39.829140, -84.890857, 6]
      ['Joes Pizza', 39.834409, -84.889822, 5],
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 25,
      center: new google.maps.LatLng(39.830184, -84.893401),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
       position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
        }
      })(marker, i));
    }
    </script>
    </body>
    </html>

【问题讨论】：

尝试使用低于最大值的初始缩放级别（如 11 左右），看看这是否会对加载产生任何影响。
感谢 Jared 的反馈。我将其更改为 11。它加载了地图的两个小部分，但没有显示任何标记，并且似乎只是在初始加载后就坐在那里。
per antsernot，您是在台式机还是移动设备上尝试这个？
刚刚刷新页面，不显示标记，但仍然只显示地图的一小部分
在 'Tin Lizzie Cafe' 行之后添加一个逗号，并在 'Joes Pizza' 行之后删除一个逗号

标签： javascript jquery html google-maps google-maps-api-3

【解决方案1】：

我无法确认您描述的行为。一切似乎都运行良好，您的代码看起来应该可以运行。

查看您的代码working example。我玩弄了初始缩放级别并调整了中心。您指定的中心并没有真正靠近标记，而且缩放级别太高，起初我以为地图没有加载。

var center = new google.maps.LatLng(39.833691, -84.892375);

google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

【讨论】：

这正是我要找的！但是当我改变我的中心时，它根本不显示。我很困惑！！！！
看我的回答。修复您的数组并将初始缩放设置为 20。@James Taylor 您的示例仅部分有效，js 错误和 4 个标记而不是 6 个
我删除了第 6 个元素，并更改了缩放。现在刚刚来到一个灰色的地图区域，没有内容。
是的，一定要解决这一行之后数组中的逗号问题：['Tin Lizzie Cafe', 39.829140, -84.890857, 6] 尽管在 JS 中尾随逗号无关紧要。可能只在我这边，但是在编辑center 时，JS 小提琴似乎被窃听了。只要确保你所做的任何事情都出现在上面的表格中。 JS fiddle 似乎偏离了一个字符。
我已经更新了我的答案，应该说 14 而不是 20，我的错。 @James Taylor 尾随逗号在旧版本的 IE 中确实很重要

【解决方案2】：

我相信你的数组有问题。查看 chrome 开发工具中的代码，它显示位置数组包含 5 个元素（不是 6 个），其中第五个是 undefined。您在第 5 个元素之后缺少一个逗号，并且在最后一个元素之后有一个尾随逗号。尝试访问该未定义元素的属性会引发 javascript 异常，该异常会在页面上停止执行。此外，在您设置的初始缩放时，什么都看不到。缩小显示带有标记的地图。将地图选项中的初始缩放设置为 14。

【讨论】：