Google Maps v3 API地图未完全加载

Question

I am building an app that will have maps showing nearby eateries. 我正在构建一个应用程序，该应用程序将具有显示附近餐馆的地图。

Map shows up, but takes a very long time to load, and never actually fully loads. 地图会显示出来，但是加载时间很长，并且从未真正加载完毕。

I am on a deadline with this, and I've tried a variety of solutions with no luck. 我的工作期限很短，我尝试了各种解决方案，但都没有碰到运气。

Someone please help!!! 有人请帮助！！！

See code below: 参见下面的代码：

    <!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>

Answer 1

I cannot confirm the behavior you described. 我无法确认您描述的行为。 Everything seems to be working fine and your code looks like it should work. 一切似乎都正常，您的代码看起来应该可以工作。

Check out this working example of your code. 查看此代码工作示例。 I played around with the inital zoom level and adjusted the center. 我玩了初始缩放级别并调整了中心。 The center you had specified wasn't really near the markers and the zoom level was so high at first I thought the map wasn't loading. 您指定的中心实际上不在标记附近，而且缩放级别起初是如此之高，以至于我认为地图没有加载。

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
});

Answer 2

I believe the problem in your array. 我相信您的阵列中的问题。 Looking at the code in chrome dev tools it shows the locations array to contain 5 elements (not 6) the fifth of which is undefined . 查看chrome dev工具中的代码，它显示的locations数组包含5个元素（不是6个），其中第五个元素是undefined 。 You're missing a comma after the 5th element and have a trailing comma after the last. 您在第5个元素后缺少逗号，而在最后一个元素后有逗号。 Trying to access properties on that undefined element is throwing the javascript exception that's halting execution on the page. 尝试访问该未定义元素上的属性会引发javascript异常，从而导致页面无法执行。 Also, at the initial zoom you have set nothing is visible. 另外，在初始缩放时，您未设置任何内容。 Zooming out reveals the map with your markers. 缩小将显示带有标记的地图。 Set your initial zoom in your map options to 14. 将地图选项的初始缩放比例设置为14。

Google Maps v3 API地图未完全加载

问题描述

2 个解决方案

解决方案1
1 2015-01-16 19:55:20

解决方案2
1 2015-01-16 20:01:07

Google Maps v3 API地图未完全加载

问题描述

2 个解决方案

解决方案1 1 2015-01-16 19:55:20

解决方案2 1 2015-01-16 20:01:07

解决方案1
1 2015-01-16 19:55:20

解决方案2
1 2015-01-16 20:01:07