谷歌地圖不顯示

我試圖顯示來自通用API的簡單地圖，出於某種原因，HTML時加載「map_canvas」的DIV設置爲hidden.Here是代碼：谷歌地圖不顯示

<html> 
<head> 
<style type="text/css"> 
</style> 
<script type="text/javascript" src="jquery-2.1.0.js"></script> 
<script src="http://maps.googleapis.com/maps/api/js?" type="text/javascript"></script> 
<script type="text/javascript"> 
     var mapOptions = { 
      center: new google.maps.LatLng(-33.45, -70.66667), 
      zoom: 11, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     jQuery(document).ready(function(){ 
      map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
     }); 

</script> 
</head> 
<body> 
body test 
<div id="map_canvas">map test</div> 
</body> 
</html>

我已經把單詞「地圖測試」來測試可見性。任何想法？

感謝

來源

2016-07-31 Christian Romero

你可能不希望在這裏粘貼您的實際密鑰。 – TangKe

沒有理由不發佈瀏覽器密鑰（Google Maps JavaScript API v3所需的類型），它必須公開（服務器密鑰不同，它們應該受到保護） – geocodezip

嘗試添加witdh和高度的地圖容器

<div id="map_canvas" style="width: 400px; height: 400px;"></div>

來源

2016-07-31 20:47:44 scaisEdge

是的，這與處理重新排序的腳本。謝謝 –

儘量把腳本</body>之前和之後div#map_canvas。

在你的代碼中，當腳本被調用時，id「map_canvas」不存在。

<html> 
<head> 
<style type="text/css"> 
</style> 
<script type="text/javascript" src="jquery-2.1.0.js"></script> 
<script src="http://maps.googleapis.com/maps/api/js?" type="text/javascript"></script> 
</head> 
<body> 
body test 
<div id="map_canvas">map test</div> 
<script type="text/javascript"> 
     var mapOptions = { 
      center: new google.maps.LatLng(-33.45, -70.66667), 
      zoom: 11, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     jQuery(document).ready(function(){ 
      map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
     }); 

</script> 
</body> 
</html>

您還需要使用您的API密鑰（「YOUR_KEY」），並用回調調用函數。舉例來說，在我的網站：

<!-- ... --> 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap"></script> 

<script type="text/javascript"> 
function initMap() { 
    var styleArray = [ 
     { 
      featureType: "all", 
      stylers: [ 
       { hue: "#3e4950" }, 
       { saturation: -80 } 
      ] 
     } 
    ]; 
    var map = new google.maps.Map(document.getElementById('mymaps'), { 
     center: {lat: 48.6949454, lng: 2.1856039}, 
     scrollwheel: false, 
     draggable: false, 
     zoomControl: false, 
     disableDoubleClickZoom: true, 
     disableDefaultUI: true, 
     // Apply the map style array to the map. 
     styles: styleArray, 
     zoom: 9 
    }); 
} 
</script> 
<!-- ... -->

來源

2016-07-31 20:34:10

谷歌地圖不顯示

回答

相關問題