Google지도 대신 회색 상자가 표시됩니다.

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

없음 확인이 도움이 : 내가 설정 mapTypeIds 내 웹 사이트에 diffrent하는 MapOptions를 사용하고

여기 내 코드입니다.

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