Tabs has been very commonly used over the years for usability and to save space. However, if you add Google Maps to tabs, or add a ‘display: none’ to your map, there will be an issue loading your map when you want to show it again. It will show you a gray screen. with just the controls, you can’t even see the streets! It will only appear if you zoom in/out, move the map or scroll the page.
To rectify this issue, I have found a solution using jQuery. Below is the code to add the map in tabs. I had 3 tabs in the page: hqMap, opMap and salesMap. You need to add the below code in your footer.php, after and between the tags.
Warning: You need to have programming knowledge prior to modifying the theme files as it may result in a 500 internal server error if you make a mistake.
Initiate Map
Add the magic code to prevent map from loading in the initMap() function
What this basically does is that it forces the map to recenter and resize, because the map won’t appear in tabs until you move or resize it.
WordPress Huge IT Maps
Some of you might prefer using external plugins when using WordPress to save time or make it easier for your clients to change the map settings themselves. Well most of the plugins out there are not tailored for every condition that will suit you. Huge IT Maps for example is not meant to be used in tabs.
However, Huge IT Maps support team has come up with a solution to allow tabs or display none. This is the modified version of the original solution they provided:
Include the block of code below into the frontend.js file, after var front_end_map = new google.maps.Map(document.getElementById(elementId), frontEndMapOptions);
This block of code works the same as the above code.
Warning: It is not recommended to modify any plugin files because plugins can be updated very frequently and they are supported by third parties. If you modify your plugin without renaming your plugin name/folder, your modified code will disappear on the next update. It is advised that you have programming knowledge prior to doing any code changes.
Reference: https://wordpress.org/support/topic/map-not-work-in-tabs-2/