구글 지도 API 관련 채택완료

구글 가서 그리고 API 생성된는데 옆에 ! 이게 떠있던데...

<div id="map"></div>
    <script>
function initMap() {
  var cairo = {lat: 30.064742, lng: 31.249509};

  var map = new google.maps.Map(document.getElementById('map'), {
    scaleControl: true,
    center: cairo,
    zoom: 10
  });

  var infowindow = new google.maps.InfoWindow;
  infowindow.setContent('<b>seoul</b>');

  var marker = new google.maps.Marker({map: map, position: cairo});
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}

function initMap() {
  var cairo = {lat: 30.064742, lng: 31.249509};

  var map = new google.maps.Map(document.getElementById('map'), {
    scaleControl: true,
    center: cairo,
    zoom: 10
  });

  var infowindow = new google.maps.InfoWindow;
  infowindow.setContent('<b>القاهرة</b>');

  var marker = new google.maps.Marker({map: map, position: cairo});
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}

    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDx569gsxQbtKg8hm5JbIEvckpL18i6Coo&language=en&callback=initMap"></script>

이렇게 했는데 화면에 아무것도 안보이는데 지도 나오게하는 iframe이나 이런걸 따로 넣어야하나요?