Official Pacquiao-Mayweather fight poster released

The official poster for the mega-fight between Floyd Mayweather and Manny Pacquiao has been released. The poster shows Mayweather on the left and Pacquiao on the right both drenched in sweat and looking ready to battle it out in the ring. HBO Boxing made the big reveal on its Twitter account in the early morning hours of Tuesday, March 24, 2015.

Google Maps in Zurb Foundation Section ( Tabs )

Google Map will not be rendered completely  when  you initialized the map but the container holding it is hidden initially. A common example is a map  inside a Jquery Tab or a map shown inside  a Dialog Box(Or Modal / Reveal)

The most common solution to this problem is to resize the map when the tab becomes active or opened. If you are using Jquery UI or Twitter Bootstrap and having this problem, you are lucky because can find many solutions online specially in Stack Overflow.

A common Jquery UI Tabs solution;

$(".tabs").tabs({
            show: function(e, ui) {            
                  if (ui.index == 1) {
                        x = map.getZoom();
                        c = map.getCenter();
                        google.maps.event.trigger(map, 'resize');
                        map.setZoom(x);
                        map.setCenter(c);
            }
       });

We recently had a project where we used Zurb Foundation and was faced with the same problem. We have a google map inside a secondary tab (or Section) and when the user opens the tab, the map is not loaded properly. Placing the map in the primary tab should not be a problem.

Since we are new with Zurb Foundation and  we don't know yet how to detect if a section has been opened. We wrote a temporary solution which is to use a time out (of half a second) when the user clicked on the section link and then do the necessary resizing.  This does the trick for now but the should be a more elegant solution to this(a Foundation code to know that  the section has been opened). If you have a better solution, please feel free to comment.  Thanks.

HTML

<section>
  <p class="title" data-section-title><a id="sectionMapLink" href="#"> Map</a></p>
  <div class="content" data-section-content>
    <div id="map_container" style="margin:0 auto 10px;width: 100%; height: 450px"></div>
  </div>
</section>


Javascript

$("#sectionMapLink").click(function(e) {
          setTimeout(function(){
                x = map.getZoom();
                c = map.getCenter();
                google.maps.event.trigger(map, 'resize');
                map.setZoom(x);
                map.setCenter(c);
            }, 50);
       });