Javascript GoogleMaps API仅在开发工具打开时工作

嘿，我想在我的项目中有一张地图。我从谷歌获得了谷歌地图的API_密钥。。。我在控制台中没有错误，但地图不会显示任何内容，直到我在谷歌浏览器上打开开发者工具

在那之后，马克在工作，但马克在工作。。控制台中仍然没有错误

我做错了什么

风格：

#map {
 width: 100%;
 height: 300px;
 background-color: grey;
}

代码：

函数initMap（）{
var Mylatng={lat:-0.250608，液化天然气：52.025528}；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：4，
中心：myLatLng
});
var marker=new google.maps.marker({
职位：myLatLng，
地图：地图，
标题：“标题！”
});
}

您是否确保向谷歌注册您的URL/域以使用地图API

您是否已确保向谷歌注册您的URL/域以使用地图API

您正在一个不可见/没有维度的容器中初始化映射

打开“开发工具”会在浏览器上触发调整大小，从而导致地图自身调整大小**

您可以通过以下任一方式修复它：

要么等待初始化映射，直到其容器可见

或者调用

google.maps.event.trigger（'resize'，map）

（其中

map

是一个 当容器变为可见时

---

**证明这一点的证据是：解除开发工具的锁定，使其成为一个浮动窗口。然后刷新页面（关闭开发工具）并再次打开开发工具。在您看不到地图后，它仍然不可见，因为您的浏览器从未调整过大小（因为您的开发工具是浮动的且未固定）

您正在一个不可见/没有维度的容器中初始化地图

打开“开发工具”会在浏览器上触发调整大小，从而导致地图自身调整大小**

您可以通过以下任一方式修复它：

要么等待初始化映射，直到其容器可见

或者调用

google.maps.event.trigger（'resize'，map）

（其中

map

是一个 当容器变为可见时

---

**证明这一点的证据是：解除开发工具的锁定，使其成为一个浮动窗口。然后刷新页面（关闭开发工具）并在看不到地图后再次打开开发工具，地图仍然不可见，因为您的浏览器从未调整大小（因为您的开发工具是浮动的且未固定）

不，我甚至不知道我必须这样做。。。我现在在本地工作，这是一个问题吗？不是100%确定，你说只有当你打开开发工具时才会显示？如果您的API密钥存在身份验证问题，请在我打开开发工具时查看“是”是否正常工作，但我会查看是否存在身份验证问题否这是我甚至不知道必须解决的问题。。。我现在在本地工作，这是一个问题吗？不是100%确定，你说只有当你打开开发工具时才会显示？如果您的API密钥存在身份验证问题，请在我打开开发工具时查看“是”是否正常工作，但我会查看是否存在身份验证问题是的，您是对的。。。我现在必须弄清楚如何使用google.maps.event.trigger（'resize'，map'）。。。Cheers@Maria-当用户单击“联系我们”选项卡时-您可能会在DOM元素上添加/删除类以显示正确的选项卡。添加/删除DOM类后，只需调用

google.maps.event.trigger（'resize'，map）

。另外，声明

var映射在您的
initMap
函数之外是的，您是对的。。。我现在必须弄清楚如何使用google.maps.event.trigger（'resize'，map'）。。。Cheers@Maria-当用户单击“联系我们”选项卡时-您可能会在DOM元素上添加/删除类以显示正确的选项卡。添加/删除DOM类后，只需调用
google.maps.event.trigger（'resize'，map）
。另外，声明
var映射在
initMap
函数之外
<div id="map"></div>
 <script>
   function initMap() {
   var myLatLng = {lat: -0.250608, lng: 52.025528};

   var map = new google.maps.Map(document.getElementById('map'), {
   zoom: 4,
   center: myLatLng
   });

   var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Title!'
    });
  }
 </script>
 <script async defer
   src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap">
 </script>