Question

I am instantiating a Google Map object like so:

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.el is an object created via document.createElement('div') but has not yet been inserted into the DOM. When I later append this.el to the DOM I get a map that looks like this (note all the weird gray space):

http://cl.ly/3B3z1e3g2h1U301r0X1R

I do not have this problem, though, if I first append this.el to the DOM and then instantiate the map object. Is there a way to create the map and then append it? This would greatly simplify some of my map code (I am using this in Backbone.js views).

Thanks.

-Scott

Answer 1

After you append this.el to the DOM, you have to call google.maps.event.trigger(this.map, ‘resize’);