Map tiles do not show up unless I resize

[mattpramschufer]

I am using https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js CDN approach

When my map displays sometimes it will show the background tiles, and sometimes it doesn't. You have to manually resize the browser for it to render the tiles. If you click on any cluster markers, it doesn't show tiles anymore and you have to resize again.

You can view at https://s3.amazonaws.com/pramadillo/screencast_2022-06-03_11-34-06.mp4

I have the following code for displaying the map

`(function ($) { 'use strict';

$(function () {
    var bounds = new google.maps.LatLngBounds()
    var markers = getMarkers();

    $(window).scroll(function () {
        var offset = 0;
        var sticky = false;
        var top = $(window).scrollTop();
        var bottom = $('.entry-content').scrollTop();

        if ($("#business-list-container").offset().top < top && $("#business-list-container").offset().top > bottom) {
            $(".business-list-map-container").addClass("sticky");
            sticky = true;
        } else {
            $(".business-list-map-container").removeClass("sticky");
        }
    });

    function getMarkers(){

        $.ajax({
            url: emoxie.ajax_url,
            type: 'post',
            dataType : "json",
            data: {
                action: 'emoxie_get_listings',
                nonce: emoxie.get_listings_nonce,
                post_id: emoxie.post_id,
                args: emoxie.args,
            },
            success: function(response) {
                initMap(response);
            }
        })

        return markers;
    }

    function initMap(markers) {

        const map = new google.maps.Map(document.getElementById('business-list-map'))
        var infoWindow = new google.maps.InfoWindow(), marker, i
        var marker_clusterer = new markerClusterer.MarkerClusterer({ map: map });

        /* Place each marker on the map  */
        for (i = 0; i < markers.length; i++) {
            if (null !== markers[i].lat) {
                var position = new google.maps.LatLng(markers[i].lat, markers[i].lng)
                bounds.extend(position)

                marker = new google.maps.Marker({
                    position: position,
                    map: map,
                    title: markers[i].title
                })
                marker_clusterer.addMarker( marker );

                /* Add info window to marker   */
                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                    return function () {
                        infoWindow.setContent(markers[i].title)
                        infoWindow.open(map, marker)
                    }
                })(marker, i))

                /* Center the map to fit all markers on the screen */
                map.fitBounds(bounds)
            }
        }

        var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) {
            // this.setZoom(10)
            google.maps.event.removeListener(boundsListener)
        })

        google.maps.event.trigger(map, 'resize');

    }


});

})(jQuery);`

Any help would be much appreciated. I tried triggering the map resize but that didn't seem to have any effect.

[mattpramschufer]

Just checking to see if there is any update on this?

[amuramoto]

Any chance you can post a link to a repo or code playground that reproduces this?