Google Maps resize issue with foundation css sections

问题

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.

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?

回答1:

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

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
}

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>
...

Hope this helps!

来源：https://stackoverflow.com/questions/16299665/google-maps-resize-issue-with-foundation-css-sections

标签

google-maps

resize

zurb-foundation