Google maps api 3 谷歌地图在所有浏览器上显示灰色方框

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

$（文档）.ready（函数（）{
$（“#谷歌地图”）.googlemap（{地址：105K Ho Thi Ky Phuong 1 Quan 10 Ho Chi Minh），lat:43.37049234，lng:30.3480382}）；
/*var mylatng=new google.maps.LatLng（-25.363882131.044922）；
变量映射选项={
缩放：4，
中心：myLatlng
}
var map=new google.maps.map（document.getElementById（'googlemap'）、mapOptions）；
var marker=new google.maps.marker({
职位：myLatlng，
地图：地图，
标题：“你好，世界！”
});*/
});
abc

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

问题是，当我取消注释Google的示例代码时，它就工作了。所以我的脚本文件GoogleMap\u thread\u 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));

（函数（$）{
变量图、位置、myMarker；
$.widget（'4phuong.GoogleMap'{
选项：{
地址：“未知”，
纬度：0，
液化天然气：0，
缩放：2
},
_创建：函数（）{
var$widget=this；
$widget.element.children（）.hide（）；
$widget.\u$container=$（''）；
$widget.element.append（$widget.\u$container）；
变量映射选项={
中心：新的google.maps.LatLng（$widget.options.lat，$widget.options.lng），
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.SMALL，
位置：google.maps.ControlPosition.LEFT_底部
},
mapTypeControl:false，
街景控制：错误
};
map=new google.maps.map（document.getElementsByClassName（'map-canvas'）[0]，mapOptions）；
myMarker=新的google.maps.Marker({
地图：地图，
标题：$widget.options.addr，
职位：新建google.maps.LatLng（$widget.options.lat，$widget.options.lng）
});
},
销毁：函数（）{
此.$container.remove（）；
$.Widget.prototype.destroy.apply（这是参数）；
this.element.show（）；
},
控件：函数（）{
返回此控件。$control；
}
});
}（jQuery））；

---

谁能告诉我哪里错了吗？

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

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

---

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

什么是

js/GoogleMap/GoogleMap\u-thread\u-view.js

和

js/GoogleMap/GoogleMap.css

？请提供一个演示此问题的示例。您正在为您的地图引用

文档.getElementsByCassName（'map-canvas'）

，但您只是在JS前面使用

$widget动态创建该元素。$container=$（''）

-getElementsByClassName是否实际返回map div？Hi@duncan。是的。因为我将脚本放在jQuery的document.ready中。我可以看到浏览器显示灰色框。当我使用开发工具查看DOM时，我还看到生成了Googmap的元素。发布的代码中有一个语法错误。请您详细说明错误在哪里？你可以访问我发布的示例链接进行仔细检查。是的，在我看来，这是谷歌奇怪的实现方式。我花了很多天的时间调查：-）非常真实。。当我比较html中的注释代码和GoogleMap_thread_view.js中的注释代码时，唯一缺少的选项是zoom，一般来说，如果没有指定zoom，插件应该采用一些默认值，但这不会发生

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