id="map" 이부분이 문제인것 같은데 아래와 같이 id="xap" 바꾸면 됩니다.
<html>
<head>
</head>
<body>
<div style="width:100%; height:350px;margin:5px 0; border:1px #CCC solid;" id="xap"></div>
<script>
function initMap() {
var bap = new google.maps.Map(document.getElementById('xap'), {
zoom: 10,
center: {lat: 35.9, lng: -78.5}
});
setMarkers(bap);
}
var beaches = [
['Bondi Beach', 35.963664,-78.5496636, 2],
['Coogee Beach', 35.9636292,-78.5496636, 1],
['Cronulla Beach', 35.8974678,-78.5769307, 0]
];
function setMarkers(map) {
for (var i = 0; i < beaches.length; i++) {
var beach = beaches[i];
var marker = new google.maps.Marker({
position: {lat: beach[1], lng: beach[2]},
map: map,
title: beach[0],
zIndex: beach[3]
});
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=key&callback=initMap" async></script>
</script>
</body>
</html>