It's kind of hard to say what the problem is without seeing your full code. You appear to be creating the google map objects correctly.
See https://www.w3schools.com/howto/howto_js_tabs.asp for a better explanation of the tabs code used in the example below.
Essentially the only thing I added was a resize trigger at the bottom of the openTab function so that it gets called after the tab has changed (like you were doing with resizeMap2 in your code).
Runnable example (You'll need to add your own google maps api key): https://jsfiddle.net/htmp3Lgw/12/
Hope it helps!
JS Fiddle HTML
<body> <h3>My Google Maps Demo</h3> <div class="tab"> <button class="tablinks" onclick="openTab(event, 'tab1')">Map 1</button> <button class="tablinks" onclick="openTab(event, 'tab2')">Map 2</button> <button class="tablinks" onclick="openTab(event, 'tab3')">Map 3</button> </div> <div id="tab1" class="tabcontent"> <div id="map"></div> </div> <div id="tab2" class="tabcontent"> <div id="map2"></div> </div> <div id="tab3" class="tabcontent"> <div id="map3"></div> </div> <script> var map; var map2; var map3; // ======= Google maps code ======= function initMap() { var uluru = {lat: -25.363, lng: 131.044}; map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: uluru }); map2 = new google.maps.Map(document.getElementById('map2'), { zoom: 4, center: uluru }); map3 = new google.maps.Map(document.getElementById('map3'), { zoom: 4, center: uluru }); } // ======= Resize Maps Trigger ======= function doMapsResize() { var i; var maps = [map, map2, map3]; for (i = 0; i < maps.length; i++) { google.maps.event.trigger(maps[i], 'resize'); } } // ======= Tabs code ======= function openTab(evt, tabId) { // Declare all variables var i, j, tabcontent, tablinks; // Get all elements with class="tabcontent" and hide them tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // Get all elements with class="tablinks" and remove the class "active" tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } // Show the current tab, and add an "active" class to the button that opened the tab document.getElementById(tabId).style.display = "block"; evt.currentTarget.className += " active"; // Finally, after we've changed tabs visibility call the resize trigger doMapsResize(); } </script> <!-- ADD YOUR OWN GOOGLE MAPS KEY --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=< YOUR GOOGLE MAPS API KEY >&callback=initMap"> </script>
JS Fiddle CSS
/* ========== Google Maps Styles =========== */ #map { height: 400px; width: 100%; } #map2 { height: 400px; width: 100%; } #map3 { height: 400px; width: 100%; } /* ========== Tabs Styles =========== */ /* Style the tab */ div.tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } /* Style the buttons inside the tab */ div.tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; } /* Change background color of buttons on hover */ div.tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ div.tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; }
