Javascript 为什么Google Maps容器在这个设置中突然加载为灰色空白？

有人能发现下面的错误吗？在我做了一些小的改变之前，它对我来说很好，现在地图应该显示的区域是灰色空白。我的

#big map

容器似乎也应用了一种风格，我认为在我的代码运行时，它不在那里（但我可能又错了）。无论如何，它让我发疯了，我想我自己已经看这个太久了，所以我想我会分享一下。：-）

提前感谢您的帮助

HTML:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="big-map"></div>

Javascript/jQuery：

var maps = {
    addBigMap : function (options)
    {
        // build map
        var bounds = new google.maps.LatLngBounds();
        var hue = options.hue ? options.hue : "#90cef1";          
        var settings = {
            mapTypeId: 'roadmap',
            styles : [{         
                         stylers: [{hue: hue}, {saturation: -20}],
                      },
                      {
                         featureType: "road",
                         elementType: "geometry",
                         stylers: [{lightness: 100}, {visibility: "simplified"}]
                      },
                      {
                         featureType: "road",
                         elementType: "labels",
                         stylers: [{visibility: "off"}]
                      }]
        };
        var map = new google.maps.Map(options.$container[0], settings);
        map.setTilt(45);
    }
};

maps.addBigMap({
    $container: $("#big-map"),
    hue: "#90cef1"
});

DOM结果：

<div id="big-map" style="position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);">
   <div class="gm-style" style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
      <div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0; cursor: url(http://maps.gstatic.com/mapfiles/openhand_8_8.cur) 8 8, default;">
         <div style="position: absolute; left: 0px; top: 0px; z-index: 1; width: 100%; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 0);">
            <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 100; width: 100%;">
               <div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
                  <div style="position: absolute; left: 0px; top: 0px; z-index: 1;"></div>
               </div>
            </div>
            <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 101; width: 100%;"></div>
            <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 102; width: 100%;"></div>
            <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 103; width: 100%;"></div>
            <div style="position: absolute; z-index: 0;">
               <div style="overflow: hidden;"></div>
            </div>
         </div>
         <div style="position: absolute; left: 0px; top: 0px; z-index: 2; width: 100%; height: 100%;">         </div>
         <div style="position: absolute; left: 0px; top: 0px; z-index: 3; width: 100%; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 0);">
            <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 104; width: 100%;"></div>
            <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 105; width: 100%;"></div>
            <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 106; width: 100%;"></div>
            <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 107; width: 100%;"></div>
         </div>
       </div>
    </div>
</div>

新的google.maps.Map
构造函数中的
中心
和
缩放
选项没有默认值。另外，
mapTypeId
采用的是，而不是字符串

因此，要解决这个问题，可以为
center
和
zoom
添加默认值，并去掉
mapTypeId
（因为谷歌将类型默认为路线图）

最后，删除第一行
stylers
末尾的尾随逗号

如果你愿意，我可以和你一起玩


map={
addBigMap:函数（选项）{
//构建地图
var bounds=new google.maps.LatLngBounds（）；
var hue=options.hue？options.hue:#90cef1；
var latlng=新的google.maps.latlng（36.4120739，-82.444035）；
变量设置={
中心：拉特林，
缩放：8，
样式：[{
样式器：[{hue:hue}，{saturation:-20}]
},
{
特色类型：“道路”，
elementType:“几何体”，
样式器：[{亮度：100}，{可见性：“简化”}]
},
{
特色类型：“道路”，
elementType:“标签”，
样式器：[{可见性：“关闭”}]
}]
};
var map=new google.maps.map（选项$container[0]，设置）；
地图.设置倾斜（45）；
},
init:function（）{
如果（document.readyState==='loading'）{
google.maps.event.addDomListener（窗口'load'，maps.init）；
返回；
}
maps.addBigMap({
$container:$（“#大地图”），
色调：“90cef1”
});
}
};
#大地图{
浮动：左；
宽度：100%；
高度：290px；
边缘顶部：20px；
>div{
位置：绝对位置；
左：-3px！重要；
顶部：-44px！重要；
宽度：103%！重要；
身高：120%！重要；
}
}

在你的
样式器中：[{hue:hue}，{saturation:-20}]，
行在你的js中，你的末尾有一个额外的逗号。谢谢！不幸的是，这并没有解决它。我真希望它能解决：）Ctrl-Shift-K（Firefox）或Ctrl-Shift-I（Chrome），看看JS控制台。有错误吗？事实上，我刚刚注意到我有多个样式器。。这看起来不正常。。我想我可能粘贴了我的新代码，并保留了旧代码。我会尝试删除重复的，我知道了。在设置对象中，添加“居中”和“缩放”并删除mapTypeId。显然，在构建
新的google.maps.Map
时，这些都不是可选的。我在jsfiddle中玩了一会儿，当我添加了这两个选项并取出
mapTypeId
加载的地图时。我认为部分问题在于路线图的mapTypeId应该是常量而不是字符串。如果这对你有用的话，我会把它作为答案贴出来。
<div id="big-map" style="position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);">
   <div class="gm-style" style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
      <div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0; cursor: url(http://maps.gstatic.com/mapfiles/openhand_8_8.cur) 8 8, default;">
         <div style="position: absolute; left: 0px; top: 0px; z-index: 1; width: 100%; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 0);">
            <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 100; width: 100%;">
               <div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
                  <div style="position: absolute; left: 0px; top: 0px; z-index: 1;"></div>
               </div>
            </div>
            <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 101; width: 100%;"></div>
            <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 102; width: 100%;"></div>
            <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 103; width: 100%;"></div>
            <div style="position: absolute; z-index: 0;">
               <div style="overflow: hidden;"></div>
            </div>
         </div>
         <div style="position: absolute; left: 0px; top: 0px; z-index: 2; width: 100%; height: 100%;">         </div>
         <div style="position: absolute; left: 0px; top: 0px; z-index: 3; width: 100%; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 0);">
            <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 104; width: 100%;"></div>
            <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 105; width: 100%;"></div>
            <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 106; width: 100%;"></div>
            <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 107; width: 100%;"></div>
         </div>
       </div>
    </div>
</div>