Google Map Api: Map Greyed Out The First Load and The Greyed Area Cannot Load

I have a super weird problem with google map. There is no error on the console, but every time the map loads, it shows only grey box with all the tools are shown.

The bottom-right tools are shown, but there are no icons (icons are not showing, only the white boxes).

If I move the map to the left, All the left areas are loaded well, but if I move it to the right, the right to the initial position and so, the greyed area are still greyed, the map does not rendering the initial position area and to the right.

If zoom out the map, I can see there is a straight line border from north pole to south pole dividing the are which are rendered well (the left side from my initial position) and the right side (my initial position and to the right of it).

Is this a bug? How to fix this?

I tried to call "resize" event to the map, but the problem still persist.

Here are the codes:

Razor:

var googleMapSrc = @"https://maps.googleapis.com/maps/api/js?key=" + @ETrackerUser.ETrackerUserConfig._MapApiKey.Trim() + @"&callback=initMap";

The Html:

<div id="mapContainer" style="width:100%; height:100%">
</div>

Script:

<script type="text/javascript">
    var locations = JSON.parse($('#CoordinatesModel').val());

    var geocoder;
    var map;

    function initMap() {

        setTimeout(function () {
            var html = '<div id="map" style="height:600px;"></div>';
            $('#mapContainer').html(html);

            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: {lat: -25.363, lng: 131.044},
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            google.maps.event.addListener(map, "idle", function () {
                google.maps.event.trigger(map, 'resize');
            });

        }, 2000);
        setTimeout(function () {
            google.maps.event.trigger(map, 'resize');
            map.setZoom(map.getZoom());
        }, 5000);
    }
</script>

<script async defer src="@googleMapSrc"></script>

Images:

Initial Load:

Move to the left of initial load:

Zoomed Out:

---

Note:

I even try to use simple map example code and it still produce the same error.

---

Found the problem

This is very very stupid. When I use Internet Explorer, everything is fine. Currently my default browser is google chrome. Google chrome messed up this google map (so weird and so stupid).

I do not know if this is a bug or there is something wrong with my chrome configuration.

If someone know the problem, help me.

For now I am just gonna using Internet Explorer.