Map is located in tab which is hidden by default

For correct working of map that is located in the tab, which is hidden by default – you should do some simple actions:

  1. Add the ID of map as an attribute to tab header.
  2. Add a small script with a callback for click on your tab headers – directly on a page with tabs or into any javascript file of your theme which is loaded on the page with tabs. The callback should:
    • get the map id from tab header
    • get map object using the function gmpGetMapById(map_id) (it is a global function of Google Maps Easy plugin)
    • call the function refresh() of map object to refresh map after show tab content.

It can be done as in the example below. Let’s imagine that we have a tabs container with id “tabsList” and a several tabs, which have tab header with class “tabItem”. We can write next callback for click on tabs header:

<ul id="tabsList">
      <li><a href="#tabItemContent_1" class="tabItem">Tab 1</a></li>
      <li><a href="#tabItemContent_2" class="tabItem" data-map_id="1">Tab 2</a></li>
      <li><a href="#tabItemContent_3" class="tabItem">Tab 3</a></li>
</ul>
<div id="tabItemContent_1">Some data</div>
<div id="tabItemContent_2"> 
Google Maps Wordpress
</div> <div id="tabItemContent_3">Some data</div> jQuery(document).ready(function() { var tabSection = jQuery('#tabsList'); if(tabSection.length) { // Find all tabs tabSection.find('.tabItem').each(function() { // Get map id var mapId = jQuery(this).data('map_id'); // Check, is this tab contains map or not if(mapId) { jQuery(this).on('click', function() { // Call the function from Google Maps Easy plugin to refresh map after the tab opening gmpGetMapById(mapId).refresh(); }); } }); } });

If you do not understand clearly – what exactly should happen in js code – please show this article to your site developer.

Categories
Latest Articles