Question

作为一个更大的项目的一部分，我们正在尝试使用Google的Map API v3在网站上获取地图。我已经按照Google制定的最简单的步骤进行了操作，我尝试从其他工作地图中直接复制代码。但无论我做什么，我们得到的只是一个灰色的盒子，没有地图。

使用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>

Answer 1

这对我有用。您只需设置zoom参数：

更新（由@ user2652379提供）：您需要设置 BOTH zoom和center选项。只是zoom不起作用。

<!DOCTYPE html>
<html>
<head>
<title></title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</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);
       // map.addControl(new GSmallMapControl());
       // map.addControl(new GMapTypeControl());
       // map.addMapType(ROADMAP);
       // map.setCenter(
       // new GLatLng(37.4419, -122.1419), 13);
    }

</script>

  </head>
  <body onload="load()">
    <div id="map" style="width: 800px; height: 400px;">&nbsp;</div>
</body>
</html>

Answer 2

另一种情况是在初始化地图时隐藏地图容器。例如。你是在bootstrap show.bs.modal事件中进行的，而不是shown.bs.modal

Answer 3

我遇到了同样的问题，遇到了很多关于stackoverflow的话题，但是没有一个能为我提供有效的解决方案。我最终发现它是由我添加的一行css引起的。

地图中的所有元素都继承了

overflow:hidden;

通过在我的CSS中添加以下行，它已修复

#map * {
    overflow:visible;
}

Answer 4

我想添加一个快速评论，因为我有 zoom参数集的同样问题。我发现问题是我的主题的CSS。在我的基本主题中，我有以下CSS：

img, embed, object, video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

这搞砸了地图的渲染，在我删除它之后，我的地图渲染得很好。

Answer 5

还要注意地图中心或标记的纬度或经度值无效。例如，this fiddle显示灰色死亡地图，因为地图中心位于北纬131.044，无效（不是来自+90：-90）。

function initMap() {
  var uluru = {lat: 131.044, lng: -25.363};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}

Answer 6

就我而言，我正在使用iview库中的vue和modal制作地图;并且在第一次渲染过程中它起作用，但任何其他渲染显示灰色死亡屏幕。我通过设置超时功能来修复此问题，以便在50毫秒后显示地图，以便为模态提供足够的时间进行渲染和可见。

//Time out is crucial for the map to load when opened with vue
setTimeout(() => {
   this.showMap(id);
}, 50);

Answer 7

我意识到这是一个旧线程，但是将来可能会对某人有所帮助。

为此付出了数小时的时间，但是发现如果在不可见的情况下渲染地图时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。

Answer 8

我有同样的问题。我在Jquery Accordion 中使用谷歌地图，当我展开div时，地图只包含一个灰色区域。我能够通过触发指定的手风琴标题上的点击事件并将地图容器设置为可见来解决此问题。

<强>脚本：

<script type="text/javascript">
    var map;

    function initMap(lat, lng) {
        var myCenter = new google.maps.LatLng(lat, lng);

        var mapOptions = {
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: myCenter
        };

        map = new google.maps.Map(document.getElementById('map'), mapOptions);

    }
    function ViewMap() {
        var latlng = document.getElementById('<%=txt.ClientID%>').value.split(','); // This is where my latlng are placed: 25.12312,55.3212333
        $("#showmap").show();
        // Sorry for mixing up Jquery and javascript.
        initMap(latlng[0], latlng[1]);
    }

</script>

ASPX文件/ Html标记：

<h3 id="lMap" onclick="ViewMap();"><i class="fa fa-map-o" onclick="ViewMap();"></i>Location Map</h3>
<div style="height:auto" id="showmap">
   <div id="map" style="width: 850px; height: 550px; overflow: visible"></div>
</div>

Answer 9

我有一个我正在研究的网站的问题。我们正在为所有<img>标签做一些事情以获得响应。此修复程序适用于我们的地图：

img {max-width: initial !important;}

Answer 10

对于那些可能会被卡住而不管这里提供的好解决方案的人，请尝试直接在html标记中设置容器的高度和宽度，而不是样式表。

<div id="map-container" style="width: 100%; height: 300px;"></div>

快乐的映射！

Answer 11

就我而言，有人将这个小奖项放在了一些responsive.css文件中：

img {
  max-width: 100% !important;
}

删除了，现在一切都很好。

Answer 12

对于每个人来说情况可能并非如此，但也许它可以帮助某人。

我在地图元素中放置data属性，在地图中创建标记，如下所示：data-1-lat="2" data-1-lon="3" data-text="foo"。我根据它们放在数据属性中的顺序将它们放在一个数组中。

问题是IE和Edge（出于某些疯狂的原因）颠倒了HTML标记中数据属性的顺序，因此我无法从数据属性中正确地提取它们。

Answer 13

现有答案均无济于事，因为我的问题是阿波罗正在向我的MapOptions object添加额外的属性（“ __typename”字段）。

换句话说，JSON看起来像这样：

mapOptions {"__typename":"MapOptions","center":{"__typename":"GeoCoordinates","lat":33.953056,"lng":-83.9925},"zoom":10}

一旦我意识到这些额外的属性是有问题的，这就是我（使用TypeScript）解决它的方法：

function getCleanedMapOptions(mapOptionsGql: google.maps.MapOptions): google.maps.MapOptions {
  const mapOptions = { ...mapOptionsGql };
  const lat: number = mapOptions.center.lat as number;
  const lng: number = mapOptions.center.lng as number;
  const mapOptionsCleaned = {
    center: new google.maps.LatLng({ lat, lng }),
    zoom: mapOptions.zoom,
  };
  return mapOptionsCleaned;
}

export function createMap(mapOptions: google.maps.MapOptions): google.maps.Map {
  const mapOptionsCleaned = getCleanedMapOptions(mapOptions);
  const map = new google.maps.Map(document.getElementById('map') as HTMLElement, mapOptionsCleaned);
  return map;
}

Answer 14

我犯了一个非常尴尬的错误，导致一个小时不必要地挠头并尝试了每个修复程序，直到我意识到问题就在我的脑海

在测试了所有硬编码的东西之后，我从模型中获取了坐标，并且写得太快了：

const loc = { lat: @Model.Latitude, lon: @Model.Longitude  }; // <----- Notice "lon"

显然，如果正确拼写参数，效果会更好：

const loc = { lat: @Model.Latitude, lng: @Model.Longitude };

谁会猜出正确的语法和拼写很重要。.：P

Answer 15

在我的情况下（提交时版本是3.30），这是因为div id必须是＆＃34; map＆＃34;

<div id="map"></div>
...
document.getElementById("map")

Google Maps API v3：灰盒子，没有地图

15 个答案: