Does a Google Map element have to be in the DOM when instantiating?

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

Same comment from a similar question: If you are using MarionetteJS with regions, creating the map inside the onShow method rather than onRender solves the problem, as the view is already in the DOM. — alancasagrande, Feb 17 '14 at 02:50

score 3 · Accepted Answer · answered Mar 07 '12 at 22:06

3

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

answered Mar 07 '12 at 22:06

puckhead

1,881
15
10

...because the API believes it still to have no size, so you need to tell it otherwise. – Andrew Leach Mar 07 '12 at 22:49

Does a Google Map element have to be in the DOM when instantiating?

1 Answers1

Linked