谷歌地图 iframe 在隐藏的 <div> 中缩放和居中问题答案

【问题标题】：Google map Iframe in a hidden <div> problems with zoom and centering谷歌地图 iframe 在隐藏的 <div> 中缩放和居中问题
【发布时间】：2015-06-30 13:42:11
【问题描述】：

我正在使用这个 Google Map iframe 切换代码：http://jsfiddle.net/cancerian73/T7jLf/20/ 但是这个例子有效，因为地图 iframe 有很多参数。而且我正在使用无法具有相同参数的自定义 Google 我的地图... 当我的 iframe 打开时，我的标记位于左上角，地图未缩放到我看到整个大陆的位置。我怎样才能做到这一点？

我尝试将地图放在单独的 HTML 文件中并从隐藏的 div Iframe 中调用此位置，我认为如果将地图加载到其他 HTML 文件中它会起作用，但同样的问题...
我尝试删除 display:none 并将 div 大小设置为 1px x 1px，但它与 div 切换和周围内容完全混淆...

顺便说一句，因为我为我使用 Google Map Iframe 的 API 解决方案不适用：

google.maps.event.trigger(map, 'resize')

我还有一个想法，但不知道它是否可行，我不知道该怎么做。是否可以在 display:none CSS 上放置某种延迟加载，以便地图以全尺寸加载并在 1 或 2 秒后隐藏？可以的话请帮忙

【问题讨论】：

标签： javascript jquery google-maps iframe google-maps-api-3

【解决方案1】：

显示这种地图最简单的方法是在单击显示框架的元素时调用javascrip函数生成地图。

我经常不得不使用隐藏的地图，我发现查看地图最简单的方法是调用地图显示的函数，该函数连接到按钮或选项卡等演示事件

在 HTML 中

<div class = "myclass" onclick = "show_my_map()">

在javascript中

<script>

show_my_map function() {

   mapOptions var = {
     Level: 17,
     center: new google.maps.LatLng (41.650299490787712, 12.536399034779)
     mapTypeId: google.maps.MapTypeId.SATELLITE
   };



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

}
</script>

【讨论】：

你的意思是通过API加载它？