Menu icon Foundation

My Posts


My Comments

Armin Hopp commented on Bruno Monteiro's post about 4 years

As of 5.5.2 google maps initialization needs to be done exactly once upon the tab becoming visible for the first time
Javascript
var initMap = function() {
// q'n'd check to see if gmap div is still empty -> no initalization done yet
if ($.trim($("#trigger-map").html()) === '') {
$("#trigger-map").gMap({/*options*/});
}
};

Armin Hopp commented on Bruno Monteiro's post over 4 years

The answer given in the link below still works:
here: http://foundation.zurb.com/forum/posts/1007-foundation-4---map-as-a-tab-content

In my case, I am using he jQuery-gmap plugin (https://github.com/marioestrada/jQuery-gMap), this code did the trick:

You need to call map initialization when the tab with the map gets active. Might be, that initialization only on the first click is sufficient, didn't check.

<!-- ... -->
<ul class="tabs" data-tab>
   <li class="tab-title active"><a href="#first-tab">First</a></li>
   <li class="tab-title"><a href="#tab-with-map" onclick="initMap();">Second</a></li>
</ul>
<div class="tabs-content">
   <div class="content active" id="first-tab">Some Content</div>
   <div class="content" id="tab-with-map">
      <div id="trigger-map" style="height:250px;"></div>
   </div>
</div>
<!-- ... -->

<!--- end of page before </body> -->
<script src="/js/vendor/jquery/jquery.js"></script>
<script src="//maps.google.com/maps/api/js?sensor=true"></script>
<script src="/js/foundation.min.js"></script>
   <script>
   //<!--
   $(document).foundation();

   var initMap = function() {
    $("#trigger-map").gMap({/*options*/});
  };
   //-->
   </script> 
</body>
</html>

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Bruno Monteiro's post about 4 years

As of 5.5.2 google maps initialization needs to be done exactly once upon the tab becoming visible for the first time
Javascript
var initMap = function() {
// q'n'd check to see if gmap div is still empty -> no initalization done yet
if ($.trim($("#trigger-map").html()) === '') {
$("#trigger-map").gMap({/*options*/});
}
};

You commented on Bruno Monteiro's post over 4 years

The answer given in the link below still works:
here: http://foundation.zurb.com/forum/posts/1007-foundation-4---map-as-a-tab-content

In my case, I am using he jQuery-gmap plugin (https://github.com/marioestrada/jQuery-gMap), this code did the trick:

You need to call map initialization when the tab with the map gets active. Might be, that initialization only on the first click is sufficient, didn't check.

<!-- ... -->
<ul class="tabs" data-tab>
   <li class="tab-title active"><a href="#first-tab">First</a></li>
   <li class="tab-title"><a href="#tab-with-map" onclick="initMap();">Second</a></li>
</ul>
<div class="tabs-content">
   <div class="content active" id="first-tab">Some Content</div>
   <div class="content" id="tab-with-map">
      <div id="trigger-map" style="height:250px;"></div>
   </div>
</div>
<!-- ... -->

<!--- end of page before </body> -->
<script src="/js/vendor/jquery/jquery.js"></script>
<script src="//maps.google.com/maps/api/js?sensor=true"></script>
<script src="/js/foundation.min.js"></script>
   <script>
   //<!--
   $(document).foundation();

   var initMap = function() {
    $("#trigger-map").gMap({/*options*/});
  };
   //-->
   </script> 
</body>
</html>

Posts Followed


Following

  • No Content

Followers

  • No Content