Google Maps API v3:灰盒，无地图
作为一个更大的项目的一部分，我们正在尝试使用谷歌的地图应用程序接口v3在网站上获取地图。我遵循了谷歌列出的最简单的步骤，我尝试直接从其他工作地图复制代码。但不管我怎么做，我们得到的只是一个灰色的盒子，没有地图。
使用Firebug，我可以看到试图填充地图的信息，但它根本不显示。我试过jquery，jquery库是专门为谷歌地图制作的，什么都不起作用。我已经上上下下在互联网上和所有谷歌的api帮助文件。此外，问题不是本地的，因为我已经将文件上传到多个服务器，并在多个浏览器和计算机上对其进行了测试。什么都不起作用。
在这一点上，这肯定是我忽略的一些愚蠢的事情。这是我的代码。
<!DOCTYPE html>
<html>
<head>
<title></title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?&sensor=true">
</script>
<script type="text/javascript">
function load()
{
var mapDiv = document.getElementById("map");
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions =
{
//zoom: 8,
center:latlng,
//backgroundColor: '#ff0000',
mapTypeId: google.maps.MapTypeId.ROADMAP,
imageDefaultUI: true
};
var map = new google.maps.Map(mapDiv, mapOptions);
function createMarker(point, text, title)
{
var marker =
new GMarker(point,{title:title});
return marker;
}
}
</script>
</head>
<body onload="load()">
<div id="map" style="width: 800px; height: 400px;"></div>
</div>
</body>
</html>回答 8
Stack Overflow用户
发布于 2016-07-12 23:17:53
另一种情况是，在初始化贴图时，贴图容器处于隐藏状态。例如，您是在bootstrap show.bs.modal事件而不是shown.bs.modal中执行此操作
Stack Overflow用户
发布于 2016-04-04 22:21:57
我遇到了同样的问题，遇到了很多关于stackoverflow的话题，但没有一个对我来说是有效的解决方案。我最终发现这是由我添加的一行css引起的。
映射中的所有元素都继承了
overflow:hidden;通过将以下行添加到我的CSS中，修复了该问题
#map * {
overflow:visible;
}Stack Overflow用户
发布于 2019-06-05 22:13:15
我意识到这是一个古老的主题，但这可能会在未来对某些人有所帮助。
为此我苦苦挣扎了几个小时，但在发现如果地图不可见时，Google Map会使用灰色方框来呈现地图后，我使用了一点jQuery使我的应用程序仅在地图可见时才实例化和呈现地图，如下所示：
if ($("#myHomeMapHolder").is(":visible")) {
if (homemap == null) {
homemap = new google.maps.Map(document.getElementById("myHomeMapHolder"), myOptions);
google.maps.event.addListener(homemap, 'click', function (event) {
placeHomeMarker(event.latLng);
});
} else {
homemap.setCenter(myLatlng);
}
if (homemarker == null) {
homemarker = new google.maps.Marker({
position: myLatlng,
map: homemap,
title: "Home"
});
} else {
homemarker.setPosition(myLatlng);
}
}瞧，我的地图只有在地图持有者可见的情况下才会被渲染，所以它永远不会使用灰色的方框渲染。
对于任何想知道的人来说，myHomeMapHolder是一个地图所在的div。
https://stackoverflow.com/questions/11749742
复制相似问题
腾讯云开发者
