Issues with dynamic google maps integration

Question

I have ran into a very strange issue with Google Maps in Chrome 5.0.375.99: if you dynamically create more than one Maps instance, the second and on have a strange bug where it does not display properly, is only shows in a fraction of the map space.

Some Example Pages:
one default - When you click addOne, the new object has the problem.
none default - When you click addOne the second time, the new object has the problem.
two default - Both of the initial maps display properly, but when you click addOne, the new object has the problem.

The really wierd part, is that re-sizing the window will force any improperly displaying maps to display properly to fix themselves. This leads me to believe that what is fixing it is the redraw event

Answer 1

Crescent Fresh is correct, in that the dimension of the div needs to be set before initialising a new map on a div.

To set the width height before creating the map div you could try the following:

return this.each(function(){
    var jT = $(this),
            center = new mAPI.LatLng(options.lat, options.long),
            geocoder = new mAPI.Geocoder();

    jT.css({
        'width': hw[0],
        'height': hw[1],
        'margin-left': 'auto',
        'margin-right': 'auto'
    });

    jT.data('map', new mAPI.Map(this, $.extend(options, { center: center })));

    geocoder.geocode({ address: address }, function(results, status) {
        if (status === mAPI.GeocoderStatus.OK && results.length) {
            if (status !== mAPI.GeocoderStatus.ZERO_RESULTS) {
                jT.data('map').setCenter(results[0].geometry.location);
                var dump = new mAPI.Marker({
                        position: results[0].geometry.location,
                        map: jT.data('map')
                });
                return dump;
            }
        }
    });
});

the above 'should' work, havent tested it tho