Google Maps overlaps container

Question

this will look weird at first, but please bear with me:

I have a list of addresses on a web page.
What I now try to do is to draw a Google Map for each of the addresses, but it would be a really cluttered page if I would display all of these Maps at the same time, so they are by default not displayed.
Each table row has a specific ID in the <tr> tag with which I identify not only the row, but also a zip code and a city name in it and also the corresponding Google Map.
When a user clicks on one of the items in the table, the Map should slide down and display via .slideToggle() from JQuery UI.

It kind of does this, but either the Google Map doesnt display correctly until I resize the browser window or turn the Map to full screen mode or the Google Map overlaps the container dramatically to the point where using the page is impossible.
Screenshot (Map hidden)
Screenshot (Map displayed)

This example was generated by initializing the Map after display is toggled on.
If I initialize it when it is toggled off, the Map won't display at all until I change the window size or switch to full screen. Additionally the Map Marker is not centered but in the top left corner.

Here is my code:

<script type="text/javascript">
        function toggleMap(id) {
            var map = document.getElementById("map" + id);
            console.log(map);
            var zip = document.getElementById("zip" + id).innerHTML;
            var city = document.getElementById("city" + id).innerHTML;
            var address = zip + " " + city
            var mapElement = \$("#map" + id);
            mapElement.slideToggle("fast");
            if (!\$('#map' + id).data('googleMap')) {
                var googleMap = new google.maps.Map(map, { zoom: 10, center: { lat: 51.1657, lng: 10.4515 } });
                console.log(googleMap);
                var coordinates;
                var geocoder = new google.maps.Geocoder();
                geocoder.geocode({'address': address}, function(results, status) {
                    if (status === 'OK') {
                        coordinates = results[0].geometry.location;
                        googleMap.setCenter(coordinates);
                        var marker = new google.maps.Marker({ position: coordinates, map: googleMap });
                    } else {
                        alert('Geocode was not successful for the following reason: ' + status);
                    }
                });
                \$('#' + map.id).data('googleMap', googleMap);
                google.maps.event.trigger(googleMap, 'resize');
            };
        }
    </script>

    <script type="text/javascript">
        function initMaps() {
            var allMaps = document.querySelectorAll('tr[id^="map"]');
            allMaps.forEach(function(map){
                var mapID = map.id.split("map")[1];
                var zip = document.getElementById("zip" + mapID).innerHTML;
                var city = document.getElementById("city" + mapID).innerHTML;
                var address = zip + " " + city
                var googleMap = new google.maps.Map(map, { zoom: 10, center: { lat: 51.1657, lng: 10.4515 } });
                var coordinates;
                var geocoder = new google.maps.Geocoder();
                geocoder.geocode({'address': address}, function(results, status) {
                    if (status === 'OK') {
                        coordinates = results[0].geometry.location;
                        googleMap.setCenter(coordinates);
                        var marker = new google.maps.Marker({ position: coordinates, map: googleMap });
                    } else {
                        alert('Geocode was not successful for the following reason: ' + status);
                    }
                });
            });
        }
    </script>

The line google.maps.event.trigger(googleMap, 'resize'); is from a suggested answer in this thread, but it doesn't quite seem to work for my problem.

I have to add that I normally don't call both of these functions at the same time. I either initialize the Maps on load and then just toggle them on and off or I initialize them on the first toggling. The data entry 'googleMap' that contains the element itself ensures I don't initialize a Map more than once.

I really hope someone can help me here. It seems I'm at loss...