Javascript 谷歌地图没有出现。只是一个空白_Javascript_Css_Google Maps

Javascript 谷歌地图没有出现。只是一个空白

javascript css google-maps

Javascript 谷歌地图没有出现。只是一个空白,javascript,css,google-maps,Javascript,Css,Google Maps,我对HTML和CSS相当陌生，我正在跟踪一项研究，其中包括这一点。现在我想把谷歌地图加入我的网站，但它不起作用。。。我的屏幕上只有一个很大的空白。我以前做过这件事，每件事我都重复了好几次。我就是不能让它工作我从学校获得了Javascript，并按照我知道的步骤进行操作。也许有人可以调查一下？提前谢谢另外，如果我犯了任何其他错误，请纠正我我的Javascript保存为maps.js，与其他Javascript保存在同一文件夹中尝试将initailize更改为initMap，以匹配api调

我对HTML和CSS相当陌生，我正在跟踪一项研究，其中包括这一点。现在我想把谷歌地图加入我的网站，但它不起作用。。。我的屏幕上只有一个很大的空白。我以前做过这件事，每件事我都重复了好几次。我就是不能让它工作

我从学校获得了Javascript，并按照我知道的步骤进行操作。也许有人可以调查一下？提前谢谢

另外，如果我犯了任何其他错误，请纠正我

我的Javascript保存为maps.js，与其他Javascript保存在同一文件夹中

尝试将initailize更改为initMap，以匹配api调用中的回调：callback=initMap。另外，请务必查阅文档。在我看来，它的布局相当不错

您遇到了什么错误？欢迎使用StackOverflow。请访问并阅读，以获取撰写好问题的提示。就目前而言，你的问题不在主题上，因为你没有描述问题，除了它不起作用。哦，对不起，我也是这个网站的新手哈哈。谷歌地图没有出现。这只是我网站上的一个空白。我没有收到任何错误或其他东西。我看到@geocodezip，不幸的是，它不适合我，但JTerry已经帮我解决了这个问题！谢谢你这么快就回答了！你是对的，它现在就出现了！我知道，这对我来说很清楚，但英语不是我的第一语言，所以我有点困惑。。。

    google.maps.event.addDomListener(window, 'load', initialize);

var map;
var markers = [
    ['Kapelstraat 13',27.175015,78.042155],
];

function initialize() {
    var mapOptions = {
        zoom: 16,
        disableDoubleClickZoom: true,
        draggable: true,
        panControl: false,
        scrollwheel: true,
        zoomControl: true,
        streetViewControl: false,
        overviewMapControl: false,
        mapTypeControl: false,
        center: new google.maps.LatLng(27.175015,78.042155)
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
    setMarkers();
}

function setMarkers(){
    for (i = 0; i < markers.length; i++) {
        var post = new google.maps.LatLng(markers[i][1], markers[i][2]);
        var marker = new google.maps.Marker({
            position: post,
            map: map
        });

        var infowindow = new google.maps.InfoWindow({
            content: markers[i][0]
        });

        infowindow.open(map,marker);
    }
}

<!DOCTYPE html>
<html>

<head>
    <title>LOFT13</title>
    <link rel="stylesheet" type="text/css" href="zaak.css">
    <link href='https://fonts.googleapis.com/css?family=Ubuntu:400,500' rel='stylesheet' type='text/css'>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDHAB5YtEF9hCPSG3BduJAsY6RyIMeqOr8&callback=initMap"
  type="text/javascript"></script>
  <script src="maps.js"></script> 
</head>

<body>

    <div id= "map-canvas">
    </div>

  </div>
</div>

</body>
</html>

/* maps */

.map {
    width: 1100px;
    height: 500px;
    background-color: #ccc;
    margin: 0 auto;
}

#map-canvas {
    width: 1200px;
    height: 600px;
}