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

Question

Here I am trying to display my map using javascript but its showing a gray box instead of map, and its not showing any error in console.

Here is image of my map:

Please help to solve it. Thanks in advance.

Here is my code:

 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

Not sure this helps:

I am using a diffrent mapOptions on my website with mapTypeIds set.

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