Map is located in tab which is hidden by default

In order to correct work map that is located on the tab which is hidden by default – follow next steps:

  1. You need to add ID of map to attribute that is located on the tab. For example:
  2. <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 2</a></li>
    </ul>
    <div id="tabItemContent_1">Some data</div>
    <div id="tabItemContent_2"> 
    </div> <div id="tabItemContent_2">Some data</div>
  3. By clicking on the tab you must call the function. You can do this as in the example below.
    Add script into the any js file of your theme which is loaded on the page with tabs:
  4. jQuery(document).ready(function() {
    	var tabSection = jQuery('#myTab_4228');
    	if(tabSection.length &gt; 0) {
    		// Find all tabs
    		tabSection.find('li').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();
    				});
    			}
    		});
    	}
    });
Categories
Latest Articles
Get plugins bundle today and save over 80%