シンプルなサイドバーのブートストラップで地図が表示されない

Question

シンプルなサイドバーのブートストラップを使用していますが、マップが表示されない理由があります。私はページ内容の中に<div id="map"></div>を入れるだけで十分だと思ったが、マップが表示されない。私は何か見落としてますか？ありがとう！ここに私のコードは次のとおりです。私はここに私のコードをダンプ

https://codepen.io/william251082/pen/rGNPqr

Answer 1

Check your api key <script src="https://maps.googleapis.com/maps/api/js? 
    key=YOUR_API_KEY&callback=initMap"></script> 
---------------------- 
    window.initMap = function() { 
     var location = {lat: 51.47672559, lng: -3.17107379}; 
     var markerloc = {lat: 51.476852, lng: -3.167869}; 
     map = new google.maps.Map(document.getElementById('map'), { 
     center: location, 
     scrollwheel: false, 
     zoom: 17 
     }); 
     var marker = new google.maps.Marker({ 
     position: markerloc, 
     map: map, 
     title: 'Hello World!' 
     }); 
    };