谷歌地图不显示

我试图显示来自通用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

谷歌地图不显示

回答

相关问题