Javascript 谷歌地图Api v3灰色地图

因此，我正在使用GoogleMapsAPIv3.13，我得到了一张灰色地图。它也没有任何控件。我的自定义标记没有显示。我什么也得不到。我没有收到任何错误，所以我不太确定发生了什么

<div id="map-canvas"></div>

#map-canvas {
 width: 530px;
 height: 298px;

}

.mapbox {
 width: 240px;
 height: 120px;
 padding: 15px;
 font-family: @sansFontFamily;
 color: @white;
 background-color: @lcOrange;

a {
display: block;
color: @white;
}
}


 var gmap;

 function initialize() {

  var myLat = new google.maps.LatLng(33.991447,-84.09403);

  var mapOptions = {
    zoom: 13,
    position: myLat,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var gmap = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  var mapIcon = '../fw/img/map-marker-lowres.png';

  var contentString = '<div class="mapbox">' + '<p><strong>The Arena at Gwinnett Center</strong></p>' + '<p>6400 Sugarloaf Pkwy<br>Duluth, GA 30097<br>(770) 813-7500</p>' + '<p>6400 Sugarloaf Pkwy<br>Duluth, GA 30097<br>(770) 813-7500</p>' + '<a href="">> get driving directions</a></div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: myLat,
    icon: mapIcon,
    map: gmap
  });


  infowindow.open(gmap,marker);
  marker.setMap(gmap);
}

#地图画布{
宽度：530px；
高度：298px；
}
.地图盒{
宽度：240px；
高度：120px；
填充：15px；
字体系列：@sansFontFamily；
颜色：@白色；
背景色：@lco范围；
a{
显示：块；
颜色：@白色；
}
}
var-gmap；
函数初始化（）{
var myLat=new google.maps.LatLng（33.991447，-84.09403）；
变量映射选项={
缩放：13，
职位：迈拉特，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var gmap=new google.maps.Map（document.getElementById（“地图画布”），mapOptions）；
var mapIcon='../fw/img/map marker lowres.png'；
var contentString=''+'格温内特中心竞技场'+'6400糖块Pkwy
佐治亚州德卢斯30097
（770）813-7500
'+'6400糖块Pkwy
佐治亚州德卢斯30097
（770）813-7500；
var infowindow=new google.maps.infowindow({
内容：contentString
});
var marker=new google.maps.marker({
职位：迈拉特，
图标：mapIcon，
地图：gmap
});
打开（gmap，标记）；
marker.setMap（gmap）；
}
映射选项
需要一个
中心
-属性（而不是
位置
）
来清除灰框！现在我看到的是一个混乱的信息窗口。它的大小不正确，添加的样式已关闭。移动了一些东西，现在我得到了这个仍然有排队问题，背景中的白框也有同样的问题，这是由我的CSS中的一行引起的。我的解决方案：