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"> 
 
  
 
 
 
 
 
 Open Full Screen
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.