谷歌地图不显示，HTML答案

【问题标题】：Google maps not showing, HTML谷歌地图不显示，HTML
【发布时间】：2019-02-06 07:42:44
【问题描述】：

我目前正在开发一个 IP 跟踪程序，但我在使用 google maps 功能时遇到了一些问题，我无法让地图显示或在 IP 位置上放置标记。谁能指出我正确的方向？

这是我用于地图的代码，我从谷歌自己的网站上获取的。

<div id="map"></div>

<script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
  }
</script>

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

Here's my complete code:

【问题讨论】：

请阅读How to Ask和minimal reproducible example。与您的问题相关的代码直接属于您的问题（以文本形式和格式正确），而不仅仅是在外部站点上。请相应地进行编辑。

标签： javascript css html google-maps

【解决方案1】：

要显示地图，您需要提供height。

在您的样式中为 id 为 map 的 div 添加此高度

 #map {
     height: 300px;
 }

更新：

如果地图容器（带有 id 地图）应该占据 HTML 主体高度的 100%。请注意，我们还必须明确声明和的这些百分比。

 #map {
    height: 100%;
 }

 html, body {
    height: 100%;
    margin: 0;
    padding: 0;
 }

【讨论】：

太棒了！您可以在谷歌地图文档中阅读需要设置高度，否则地图将不会显示在 div 中。

【解决方案2】：

您没有添加 api 密钥

Google Maps JavaScript API 警告：NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys mw.m@util.js:220 util.js:220 Google Maps JavaScript API 警告：InvalidKey https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key

【讨论】：

我不知道为什么 pastebin 中没有 API 密钥，我有一个 API 密钥。上传了一个包含我的 API 密钥的新链接。
/* 始终明确设置地图高度以定义包含地图的 div * 元素的大小。 /#map { 高度：100%; } / 可选：使示例页面填满窗口。 */ html, body { 高度: 100%;边距：0；填充：0； } 在你的 html 中添加这个样式follow this pastebin link

【解决方案3】：

在我的例子中，div 就像

<div id="map" style="height: 100%; width: 100%"></div>

但地图仅在我明确添加 position: absolute 属性时出现。所以，结果是

<div id="map" style="height: 100%; width: 100%; position: absolute"></div>

它有效。

【讨论】：