Should a Google Map element be in the DOM when instantiating?

Question

I create an instance of the Google Map object as follows:

this.map = new google.maps.Map(this.el, {
    center: new google.maps.LatLng(this.lat, this.lng),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: this.zoom
});

Where this.elis an object created with document.createElement('div'), but not yet inserted into, the DOM. When I add it this.elto the DOM later , I get a map that looks like this (pay attention to all the weird gray space):

http://cl.ly/3B3z1e3g2h1U301r0X1R

I don't have this problem, although I first add this.elto the DOM and then instantiate the map object. Is there a way to create a map and then add it? This will greatly simplify my map code (I use this in Backbone.js views).

Thanks.

-Scott

Answer 1

, this.el DOM, google.maps.event.trigger(this.map, 'resize');