Google Maps API v3 map not loading completely

Question

I am having some difficulty with a google map. The problem is that only a small portion of the map is loading as shown here:

After the page loads, if I resize the browser even the slightest amount, this causes the complete map to refresh and load correctly, as shown here:

Here is my javascript code:

google.maps.event.addDomListener(window, 'load', initialize);

$(document).ready(function(){                               
    var $width = document.getElementById("propertysection").offsetWidth;
    $('#map-canvas-2').width($width-28-175);
    $('#map-canvas-2').height($width);
    $('#myGridMap').height($width);
});

function initialize() { 
    var map; 
    var propertyMap;
    var marker; 
    var infowindow;
        var myOptions = {
            zoom: 6,
            center:new google.maps.LatLng(50.7,-86.05),
            mapTypeId: google.maps.MapTypeId.HYBRID
        }
        map = new google.maps.Map(document.getElementById("map-canvas-2"),myOptions);                  
        infowindow = new google.maps.InfoWindow({
            content: 'Property Info',
            position: new google.maps.LatLng(0, 0)
        }); 
    } 

Can anyone suggest what the problem might be? Thanks.

Answer 1

You shouldn't mix the jquery ready method with the window load event (see http://api.jquery.com/ready/).

Instead, call initialize from within your .ready function, or place the window resize functions in the initialize method itself (before initializing the map).