谷歌地图显示灰色框而不是使用javascript的谷歌地图

Question

在这里，我尝试使用 javascript 显示我的地图，但它显示的是灰色框而不是地图，并且在控制台中没有显示任何错误。

这是我的地图图片：

请帮忙解决。提前致谢。

这是我的代码：

google.maps.event.addDomListener(window, 'load', init);

function init() {
  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(40.767089, -73.969458),
    scrollwheel: false,
    disableDefaultUI: true,
    styles: [{
      stylers: [{
        hue: '#2c3e50'
      }, {
        saturation: 250
      }]
    }, {
      featureType: 'road',
      elementType: 'geometry',
      stylers: [{
        lightness: 50
      }, {
        visibility: 'simplified'
      }]
    }, {
      featureType: 'road',
      elementType: 'labels',
      stylers: [{
        visibility: 'off'
      }]
    }]
  };

  var mapElement = document.getElementById('map_canvas');

  var map = new google.maps.Map(mapElement, mapOptions);

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    title: 'Click to zoom'
  });
}

html {
  height: 100%
}
body {
  height: 100%;
  margin: 0;
  padding: 0
}
#map_canvas {
  margin: 0;
  padding: 0;
  position: absolute;
}
#map_canvas * {
  overflow: visible;
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MyKeyhere"></script>
<div id="map_canvas" style="width: 600px; height: 600px; position: relative;">
</div>

Answer 1

不确定这是否有帮助：

我在我的网站上使用不同的 mapOptions 并设置了 mapTypeIds。

    var mapOptions = {
        zoom: 19,
        center: new google.maps.LatLng( 51.7734896,4.6764931),
        mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
        }
    };