JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDicetsr9R5ZcyksiSSvVln4CQ1H4qFfdw&amp;sensor=false"></script>
<div id="container">
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">ALPHA</a>

            </li>
            <li><a href="#tabs-2">BETA</a>

            </li>
        </ul>
        <div id="tabs-1">Map:
            <div id="map_1" class="locationMap"></div>
        </div>
        <div id="tabs-2">Map2:
            <div id="map_2" class="locationMap"></div>
        </div>
    </div>
</div>

CSS

.locationMap {
    height: 500px;
    width: 665px;
}

JavaScript

jQuery(document).ready(function () {
    var map1;
    var map2;

    var myLatlng1 = new google.maps.LatLng(-34.397, 150.644);
    var myOptions1 = {
        zoom: 8,
        center: myLatlng1,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map1 = new google.maps.Map(document.getElementById("map_1"), myOptions1);
   
    var myLatlng2 = new google.maps.LatLng(-34.397, 150.644);
    var myOptions2 = {
        zoom: 8,
        center: myLatlng2,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    var map2 = new google.maps.Map(document.getElementById("map_2"), myOptions2);
   
   	var tabs = $( "#tabs" ).tabs({
		activate: function( event, ui ) {
			// Index can be calculated if needed
			ui.newTab.index();
			
			if (ui.newTab.index() == '0') {
				google.maps.event.trigger(map1, 'resize');
		
			}
			if (ui.newTab.index() == '1') {
				google.maps.event.trigger(map2, 'resize');
                map2.setCenter(myLatlng2);
			}
		}
	});



});