谷歌地圖不顯示。只是一個空白空間

-3

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

來源

2016-01-12 K. Amelink

你會得到什麼錯誤？ – AndreaM16

歡迎來到StackOverflow。請訪問[幫助]，並閱讀[問]關於編寫好問題的提示。就目前而言，你的問題不在話題上，因爲你沒有描述超出_「它不工作」的問題。 –

[發佈的代碼適合我]（http://jsfiddle.net/geocodezip/kmjqso62/1/） – geocodezip

嘗試改變initailize()到initMap()與API調用回調匹配：callback=initMap。此外，請務必查閱文檔from google。在我看來，它的佈局非常好。

來源

2016-01-12 17:59:12 JTerry

謝謝你回答這麼快！你是對的，它現在正在顯示！我知道，這對我來說很清楚，但英語不是我的第一語言，所以我有點困惑...... –

谷歌地圖不顯示。只是一個空白空間

回答

相關問題