Unable to access property in ember.js view

Question

I have a view of a Google map and I want it to expose the map so I can bind to it from another object. The problem is that since I can only instantiate the map on didInsertElement (instantiating it directly won't work since the div hasn't been rendered yet) I'm unable to access the true value of the map (it always returns null).

Here's my code:

Places = Ember.Application.create();
Places.MapView = Ember.View.extend({
    tagName : 'div',    
    map : null,               
    didInsertElement : function() {
        this._super();
        this.set('map', new google.maps.Map($('#map').get(0), {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(-33.8665433,151.1956316),
        zoom: 15
        }));
        this.get('map'); // Returns the value of the map OK
    }
});

Places.searchController = Ember.Object.create({
    mapBinding: 'Places.MapView.map' // Doesn't work
}

Here's the template:

<script type="text/x-handlebars">
{{#view Places.MapView id="map"}}{{/view}}          
</script>

If I set any other property within MapView directly I have no problem binding to it. Any ideas on how to solve this?