Question

我对HTML和CSS相当新，我正在进行一项研究，其中包含了这一点。现在我想将谷歌地图纳入我的网站，但它不起作用......我的屏幕上只有一个很大的空白区域。我以前做过，我已经多次重复了一遍。我无法让它发挥作用。

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

P.S。如果我犯了其他错误，请纠正我;）

我的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;
}

Answer 1

尝试将initailize()更改为initMap()以匹配api调用中的回调：callback=initMap。另外，请务必查阅文档from google。在我看来，它已经很好地布局了。

谷歌地图并没有显示出来。只是一个空白区域

1 个答案: