Ember.js: Google Maps View

Question

I'm trying to create a View for Google Maps, and actually got it to work according to some examples I found.

the problem is that the map draws correctly only the first time the page is displayed, if routes are changed and then a map is being drawn again it looks "distorted".

the examples I found are "one page" part of apps.

View:

App.LocationView = Ember.View.extend({
    templateName: 'location',
    MapView: Ember.View.extend({
        map: null,
        latitudeBinding: 'controller.content.geometry.lat',
        longitudeBinding: 'controller.content.geometry.lng',
        didInsertElement: function() {
            var mapOptions = {
                center: new google.maps.LatLng(0, 0),
                zoom: 16,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false
            };
            var map = new google.maps.Map(this.$().get(0),mapOptions);
            this.set('map',map); //save for future updations
            this.$().css({ width: "550px", height: "400px" });
        },
        reRenderMap : function(){
            var newLoc = new google.maps.LatLng(this.get('latitude'), this.get('longitude'));
        this.get('map').setCenter(newLoc);
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(this.get('latitude'), this.get('longitude')),
                map: this.get('map')
            });
        }.observes('latitude','longitude')
    })
});

I show the map with {{view view.MapView}} inside a div#map-holder, in my 'location' template.

I also apply this CSS to the div to "fix" Bootstrap messing with the map controls:

#map-holder img {
    max-width: none;
}

how can I fix this ?

EDIT: jsfiddle - http://jsfiddle.net/bsphere/jYfg3/ go to 'settings' and then back to 'map' to see the distorted map

Answer 1

It seems like this is not exactly related to Ember, but to the map redrawing and resizing. With your fiddle, if you resize the browser window, you can see the map displays correctly. When I saw it, I tried to put the this.$().css({ width: "550px", height: "400px" }); before the contrusction of the map, and it seems to work.