34

作为一个更大项目的一部分，我们正在尝试使用 Google 的 Map API 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>
4

14 回答 14

40

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

更新（@ user2652379 ）：您需要同时设置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>
于 2012-07-31T22:15:29.037 回答
12

另一种情况是地图容器在您初始化地图时隐藏。例如，您在引导show.bs.modal事件中执行此操作，而不是shown.bs.modal

于 2016-07-12T15:17:53.387 回答
11

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

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

overflow:hidden;

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

#map * {
    overflow:visible;
}
于 2016-04-04T14:21:57.147 回答
6

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

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

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

于 2015-10-22T13:17:38.123 回答
5

还要注意地图中心或标记的纬度或经度值无效。例如，这个小提琴显示了死亡的灰色地图，因为地图中心位于纬度 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
  });
}
于 2017-07-15T19:47:52.763 回答
3

就我而言，我在 iview 库中使用 vue 和模态处理地图；并且在第一次渲染期间它工作，但任何其他渲染显示死亡的灰色屏幕。我通过设置超时功能以在 50 毫秒后显示地图来解决此问题，从而为模态提供足够的时间来渲染和可见。

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

上面的例子是一个较早的修复和一个快速破解，我意识到你需要做的就是等待下一个滴答声，在 vue 上你可以通过

async mounted(){
   await this.$nextTick()
   this.showMap(id)
}

或者如果您对异步等待不满意，您可以尝试回调选项

mounted(){
   Vue.nextTick(function () {
     this.showMap(id)
   })
}
于 2018-01-25T09:19:10.040 回答
2

我遇到过同样的问题。我在 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>
于 2016-09-22T19:29:46.330 回答
2

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

为此苦苦挣扎了几个小时，但是在发现如果地图在不可见的情况下呈现时，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。

于 2019-06-05T14:13:15.430 回答
1

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

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

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

于 2017-03-03T16:07:20.733 回答
1

我也在处理一个网站时遇到了这个问题。我们正在对所有<img>标签做一些事情以提高响应能力。此修复程序适用于我们的地图：

img {max-width: initial !important;}
于 2017-03-24T13:14:19.303 回答
1

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

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

快乐的映射！

于 2017-12-12T14:54:48.990 回答
0

这可能不是每个人的情况，但也许它可以帮助某人。

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

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

于 2017-07-25T09:10:45.643 回答
0

现有的答案都没有帮助我，因为我的问题是 Apollo 正在向我的MapOptions 对象添加额外的属性（“__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;
}
于 2020-10-21T01:02:49.370 回答
-2

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

<div id="map"></div>
...
document.getElementById("map")
于 2017-10-30T14:39:15.380 回答