JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDicetsr9R5ZcyksiSSvVln4CQ1H4qFfdw&amp;sensor=false"></script>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Kitas</a>
        </li>
        <li><a href="#tabs-2">Spiel- und Chrabbelgruppen</a>
        </li>
    </ul>
    <div id="tabs-1">Tab 1
        <div id="map_canvas1" style="height:500px; width:100%;"></div>
    </div>
    <div id="tabs-2">Tab 2
        <div id="map_canvas2" style="height:500px; width:100%;"></div>
    </div>
</div>

CSS

#map_canvas1, #map_canvas2 {
    border: 1px solid black;
}

JavaScript

var map;

function initialize() {
    //alert('here');
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644)
    };
    map = new google.maps.Map(document.getElementById('map_canvas1'),
    mapOptions);

    map2 = new google.maps.Map(document.getElementById('map_canvas2'),
    mapOptions);

}



$("#tabs").tabs({
    // CHANGED (previously select)
    beforeActivate: function (event, ui) {

       // initialize();

        // Index can be calculated if needed
        ui.newTab.index();

        if (ui.newTab.index() == '0') {

            //google.maps.event.trigger(mapDaycares,'resize');
            //$('#form1').submit();
        }
        if (ui.newTab.index() == '1') {
            map = document.getElementById('map_canvas2');
            center = map.getCenter();
            google.maps.event.trigger(map, 'resize');
            map.setCenter(center);
            //$('#form2').submit();
        }
    }
});

google.maps.event.addDomListener(window, 'load', initialize);