Googlemap 在所有浏览器上显示灰色框答案

【问题标题】：Googlemap shows grey box on all browsersGooglemap 在所有浏览器上显示灰色框
【发布时间】：2015-05-17 06:48:33
【问题描述】：

我有一个简单的测试站点来显示谷歌地图here：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=places,geometry"></script>
<script src="js/GoogleMap/GoogleMap_thread_view.js"></script>
<link href="js/GoogleMap/GoogleMap.css" rel="stylesheet" />
<script type="text/javascript">$(document).ready(function () {
    $("#googlemap").GoogleMap({addr: "105K Ho Thi Ky Phuong 1 Quan 10 Ho Chi Minh", lat: 43.37049234, lng: 30.3480382});
    /*var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('googlemap'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World!'
  });*/
});</script>
</head>
<body style="width: 1000px; height: 600px;">
    <div id="googlemap" style="width: 1000px; height: 600px; ">abc</div>
</body>
</html>

页面只显示没有地图的灰色 div。我在这个网站上四处搜索，但没有任何效果（调整窗口事件大小、溢出：可见、宽度：100% ......等等......）

问题是当我取消注释 Google 的示例代码时，它可以工作。所以我的脚本肯定有问题，文件 GoogleMap_thread_view.js

(function ($) {
var map, place, myMarker;
$.widget('4phuong.GoogleMap', {
    options: {
        addr: 'unknown',
        lat: 0,
        lng: 0,
        zoom: 2
    },

    _create: function () {
        var $widget = this;
        $widget.element.children().hide();
        $widget._$container = $('<div class="googlemap-container"><div class="map-canvas"></div></div>');
        $widget.element.append($widget._$container);
        var mapOptions = {
            center: new google.maps.LatLng($widget.options.lat, $widget.options.lng),
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL,
                position: google.maps.ControlPosition.LEFT_BOTTOM
            },
            mapTypeControl: false,
            streetViewControl: false
        };
        map = new google.maps.Map(document.getElementsByClassName('map-canvas')[0], mapOptions);

        myMarker = new google.maps.Marker({
            map: map,
            title: $widget.options.addr,
            position: new google.maps.LatLng($widget.options.lat, $widget.options.lng)
        });
    },

    destroy: function () {
        this._$container.remove();
        $.Widget.prototype.destroy.apply(this, arguments);
        this.element.show();
    },

    control: function () {
        return this._$control;
    }
});
}(jQuery));

谁能告诉我哪里错了？

【问题讨论】：

什么是js/GoogleMap/GoogleMap_thread_view.js 和js/GoogleMap/GoogleMap.css？请提供一个 Minimal, Complete, Tested and Readable example 来证明该问题。
您指的是 document.getElementsByClassName('map-canvas') 用于您的地图，但您只是在 JS 早期使用 $widget._$container = $('<div class="googlemap-container"><div class="map-canvas"></div></div>'); 动态创建该元素 - getElementsByClassName 实际上是否返回地图 div？
嗨@duncan。是的，它确实。因为我把脚本放在了 jQuery 的 document.ready 中。我可以看到浏览器显示灰色框。当我使用开发者工具查看 DOM 时，我也看到生成了 Googmap 的元素。
贴出的代码有语法错误。
您能否详细说明错误在哪里？您可以访问我发布的示例链接进行仔细检查。

标签： google-maps-api-3

【解决方案1】：

我知道原因。这是因为我在创建地图时没有给“缩放”字段赋予价值。它应该如下所示

        var mapOptions = {
            center: new google.maps.LatLng($widget.options.lat, $widget.options.lng),
            zoom: $widget.options.zoom,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL,
                position: google.maps.ControlPosition.LEFT_BOTTOM
            },
            mapTypeControl: false,
            streetViewControl: false
        };

这真的很愚蠢，因为谷歌应该为其设置默认值。

【讨论】：

是的，在我看来，Google 的实现很奇怪。我花了很多天调查:-)
非常正确..当我比较html中的注释代码和GoogleMap_thread_view.js的代码时，唯一缺少的选项是缩放，一般来说，如果没有指定缩放，插件应该需要一些默认值，但这不会发生