Google地图通过基础CSS部分调整大小问题 [英] Google Maps resize issue with foundation css sections

问题描述

我有三个标签中的一些内容（实际上是基础CSS部分）。每个选项卡对于不同的城市都有不同的地图。

I have some content in three tabs (foundation css sections actually). Each tab has a different map for a different city. I have three different initialize functions, one for each city which are called onclick.

<p class="title dublin-tab" data-section-title><a href="#panel2" onclick="initializeDublin();">

当我点击一个标签时，只显示地图的一部分。我知道我需要调用

When I click on a tab only part of the map shows. I know that I need to call

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

但我的问题是在哪里调用它。

but my problem is where to call it.

如果我再次点击该标签，地图加载没有问题。所以我试图强制第二次点击jQuery，但这仍然无法正常工作。

If I click a second time on the tab the map loads no problem. So I tried to force a second click with jquery but this still did not work.

我见过大量的问题，人们遇到同样的问题，我几乎尝试了所有这些问题，但仍然没有为我工作。

I've seen loads of questions where people are having the same problem and I've tried nearly all of them but still nothing works for me.

我该如何解决这个问题？

How do I solve this?

推荐答案

我有同样的问题。如果您仍然在寻找解决方案，请点击这里。

I had the same issue. Here is the solution in case you are still looking.

首先 - 您需要确保Google地图变量是全球性的。只需删除var，所以初始化看起来像这样

First - you need to make sure the google maps variable is global. Just remove the "var", so the initialization looks like this

maps = map = new google.maps.Map(document.getElementById("map"), myOptions);

其次 - 您需要调整地图大小并重新调整地图的功能。

Second - you need a function that resizes the map and recenters it.

function resizeGMap() 
{
    setTimeout(function()
    {
        google.maps.event.trigger(map, 'resize');
    map.setCenter( new google.maps.LatLng(55.378275,-3.435524) ); //uk
    }, 25);  //you have to give it a delay or else it will resize to the old width/height
}

最后 - 您需要将上述函数作为包含选项卡/节名称的锚点上的onClick事件调用。像这样：

Lastly - you need to call the above function as a onClick event on the anchor that contains the name of the tab/section. Like so:

<div class="section-container accordion" data-options="one_up: false;" data-section="accordion">
   <section>
      <p class="title" data-section-title><a href="#" onClick="resizeGMap();">Name of tab/section</a></p>
...

希望这有助于您！

这篇关于Google地图通过基础CSS部分调整大小问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！