Html 谷歌地图在我的响应选项卡中不起作用

我的谷歌地图坏了

我使用了这个选项卡视图

我的google map init（）是：

var映射；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:，lng:}，
缩放：3
});

当我在第一个选项卡中运行我的谷歌地图时，它工作正常。

---

但是当我在第二个选项卡中加载时。我只获得视图。没有地图显示…

Keval，您需要在显示地图时触发调整大小

根据，您需要触发一个调整大小事件，如

google.maps.event.trigger（映射，“调整大小”）；

我在演示页面上添加了一个标签，创建了一个小提琴。我用它来收听对

mapTab

（包含谷歌地图的标签）所做的所有更改，只是为了让事情变得简单

看

---

如果将侦听器取出，则除非单击“调整地图大小”按钮，否则地图将不会显示。希望这能让事情变得清楚。

此问题在本网站上已被问了一千次。您应该先搜索，然后再问

关键是地图在初始化时是隐藏的，因此，一旦显示选项卡，您需要触发调整大小事件

google.maps.event.trigger（映射，“调整大小”）；

关于“选项卡”库：选择一个公开事件的库。您选择的库似乎不是这种情况（或者没有文档记录）

一个简单的例子：

此库公开以下事件：

事件

显示新选项卡时，事件按以下顺序触发：

隐藏.bs.tab（在当前活动选项卡上）

显示.bs.选项卡（在待显示选项卡上）

hidden.bs.tab（在上一个活动选项卡上，与hide.bs.tab事件相同）

show.bs.tab（在刚刚显示的新活动选项卡上，与show.bs.tab事件相同）

通过这种方式，你可以完全控制标签的内容。你知道标签的显示、隐藏等时间

因此，您可以使用以下内容：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  // Trigger map resize when tab is shown
  google.maps.event.trigger(map, "resize");
});

编辑：

如果需要重置中心，请在此处执行：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  // Trigger map resize when tab is shown
  google.maps.event.trigger(map, "resize");
  map.setCenter(new google.maps.LatLng(<?php echo $lat; ?>, <?php echo $long; ?>));
});

$（'a[data toggle=“tab”]”）。打开（'show.bs.tab'，函数（e）{
//显示选项卡时触发贴图调整大小
google.maps.event.trigger（map，“resize”）；
map.setCenter（新的google.maps.LatLng（，）；
});

我只使用CSS，不需要JS：

   .tab-content > .tab-pane {
    display: block;
    height:0;
    overflow:hidden;
}

.tab-content > .active {
    display: block;
    height:auto;
}

---

浏览器控制台中显示了哪些错误？

map=new google.maps.map（document.getElementById（'map'））

如果在不同的选项卡上有多个具有相同

id

的映射，则最有可能出现此问题。可能重复的否我只有一个映射id，并且我在任何地方都不使用此id。我认为问题在tabview jQuery中……不。问题是映射在初始化时隐藏，您需要触发一次调整大小事件它已经被显示出来了。首先，你的答案格式不正确。其次，你的提琴不起作用。哈..这很奇怪。有时它能起作用。我只是附加了两个演示站点的代码，修改最少谢谢大家。一切都很好，地图现在也在显示。但唯一的问题是我的标记没有显示在它的中心让我们从左上角开始…我想它在中间…我想你还需要收听地图准备活动并再次将地图居中。谢谢@MrUpsidown。一切正常，地图现在也在显示。但唯一的问题是我的标记没有显示在中间，它在左上角…我想它在中间…使用

setCenter（）

方法，在触发调整大小后使用中心坐标。我已经使用过它，但现在它可以工作了，我想是的，var map1Options={setCenter:{lat:，lng:}；

   .tab-content > .tab-pane {
    display: block;
    height:0;
    overflow:hidden;
}

.tab-content > .active {
    display: block;
    height:auto;
}