Google Maps v3 load partially on top left corner, resize event does not work

Question

Google Maps V3 loaded partially on top left corner. I tried the following methods:

• Add google.maps.event.trigger(map, \'resize\'); after map in

Answer 1

I know this is a relatively old question now however, I have come across this issue today and found a resolution. It may (may not) be helpful to people, however if you require to show the Google Maps onclick then if you call your initilise() function within this event and delay it as seen from my code below.

Google Maps API function - initialise();

var locationLondon = new google.maps.LatLng(51.508742, -0.120850);
var map;    

    function initialise(location){
        //Object to define properties
        var mapProp = {
            center: locationLondon,
            zoom: 15,
            disableDefaultUI:true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

        //Map Marker
        var marker = new google.maps.Marker({
            position: locationLondon,
            map: map
        });

        marker.setMap(map);
    };

My jQuery event call

    $( document ).ready(function(){
        $( '#maps-container' ).hide();
        $( '#card-1 .fa-info-circle' ).click(function(event){
            event.stopPropagation();
            $( '#maps-container' ).delay( 1000 ).fadeIn( 'slow' );
            $( '#map-load' ).delay( 1000 ).fadeOut( 'slow' );
            setTimeout(initialise, 1000);
        });
    });

• '#map-load' is a preloader screen for the map's initial load
• '#maps-container' is the container for the Google Map (#googleMap)