谷歌地图没有;不要出现.只是一片空白

Google maps doesn't show up. Just a blank space

本文关键字：空白 一片 谷歌地图      更新时间：2023-09-26

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

我从学校得到了一个Javascript，并按照我所知道的步骤。也许有人可以调查一下？提前谢谢。

附言：如果我犯了其他错误，请纠正我；）

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

    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>

我的关于地图的CSS

/* maps */
.map {
    width: 1100px;
    height: 500px;
    background-color: #ccc;
    margin: 0 auto;
}
#map-canvas {
    width: 1200px;
    height: 600px;
}

尝试将initailize()更改为initMap()以匹配api调用中的回调：callback=initMap。此外，一定要查阅谷歌的文档。在我看来，它的布局很好。

相关文章：