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 had the issue with all maps other than the first loaded map showing in the top left corner with the rest of the map having not loaded and therefore showing in grey.

Was scratching my head for some time but managed to solve it with:

google.maps.event.addListenerOnce(map, 'idle', function() {
       google.maps.event.trigger(map, 'resize');
       map.setCenter(latLng);
    });

It was a easy solution thanks to Ian Devlin and d.raev and just wanted to say thanks and share the code that solved it for me seeing as I can't comment or vote up yet!

I called that after creating the map with:

map = new google.maps.Map(document.getElementById("business-location-"+business_username), map_options);

so if you've got this problem put it right under where you create your map too!