Google Map gets rendered with an offset when put in a lightbox - google-maps

Question

I'm using Ember.js to implement a lightbox containing a Google Map. The problem is that when the map is in the lightbox it renders shifted up and to the left of where I expected it to be. The left over space on the bottom and right is just a blank area where you cannot drag the map. When I render the same map view in the main page, there is no problem. I also noticed that if I open the developer tools (in Chrome and Firefox), the map becomes correct. I have no idea why that is.
Here's the JSFiddle: http://jsfiddle.net/hekevintran/qt5k4/9/.
Screenshot (the bottom map is in the lightbox):
HTML:
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script type="text/x-handlebars" data-template-name="buttons">
<button {{action "openBox" }}>Open Box</button>
<button {{action "closeBox" }}>Close Box</button>
{{view App.MapView}}
</script>
<script type="text/x-handlebars" data-template-name="lightbox">
<div style="
background-color: lightgray;
border: 2px solid #000000;">
{{view App.MapView}}
</div>
</script>
JavaScript:
App = Ember.Application.create({});
App.MapView = Ember.View.extend({
installMap: function () {
var mapOptions = {
// San Francisco
center: new google.maps.LatLng(37.773429,-122.424774),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
new google.maps.Map(this.$()[0], mapOptions);
},
didInsertElement: function () {
this.$().css(
{'height': '350px',
'width': '350px'}
);
this.installMap();
}
});
Lightbox = Ember.Object.extend({
isVisible: false,
open: function () {
this.set('isVisible', true);
},
close: function () {
this.set('isVisible', false);
},
view: function () {
var controller = this;
return Ember.View.extend({
templateName: 'lightbox',
controller: controller,
isVisibleBinding: 'controller.isVisible'
})
}.property()
});
lightbox = Lightbox.create();
Ember.View.create({
templateName: 'buttons',
controller: Ember.Object.create({
openBox: function () {
lightbox.open();
},
closeBox: function () {
lightbox.close();
}
})
}).append();
lightbox.get('view').create().append();

Answer 1

The problem is that you are creating the map in the lightbox when you first load your page. This happens when you call lightbox.get('view').create().append(); at the end of your JavaScript page.
But the lightbox is not visible yet, and that confuses the Maps API. You could probably work around the problem by triggering a resize event on the map after opening the lightbox, but it's better by far to avoid creating the map and the lightbox view until you need them.
That fixes the problem, and as a bonus your page loads faster because you avoid creating the second map at load time.
To do this, I replaced the last part of your code with:
var lightbox;
Ember.View.create({
templateName: 'buttons',
controller: Ember.Object.create({
openBox: function () {
if( ! lightbox ) {
lightbox = Lightbox.create();
lightbox.get('view').create().append();
}
lightbox.open();
},
closeBox: function () {
if( lightbox ) {
lightbox.close();
}
}
})
}).append();
As you can see, I moved the lightbox = Lightbox.create(); and lightbox.get('view').create().append(); calls inside openBox(), but only calling them the first time this function is called.
I also added a guard in closeBox() so it doesn't try to close the nonexistent lightbox if it hasn't been created yet.
Here is an updated fiddle with the working code.