Google Map causes an error when transitioning in Ember.js?

I have a Google Maps component in my Ember.js application. See the code below:

import Ember from 'ember';

export default Ember.Component.extend({
    // Data
    inventory           : null,
    highlight           : null,

    // Map
    map                 : null,
    insertedMarkers     : null,
    insertedInfoWindows : null,

    // UI
    renderCount         : 0,                // Used to retain CSS styling and re-render map
    style               : Ember.computed('display', function() {
                            return new Ember.Handlebars.SafeString('height: 100%');
                        }),

    renderMap: function() {
        var inventory = this.get('inventory').toArray();

        if ((inventory !== null) && (inventory.length > 0)) {
            this.incrementProperty('renderCount');

            var self = this;

            // Set the height of the map element
            if (this.get('renderCount') === 1) {
                var elemStyle = new Ember.Handlebars.SafeString('height: ' + $('.column').height() + 'px;');
                this.set('style', elemStyle);
            }

            // Initialize the map
            var map;
            var bounds      = new google.maps.LatLngBounds();
            var mapOptions  = {
                mapTypeId           : 'roadmap',
                mapTypeControl      : false,
                streetViewControl   : false
            };

            // Display a map on the page
            map = new google.maps.Map(document.getElementById("my-map"), mapOptions);
            map.setTilt(45);

            // Multiple Markers
            var markers = this.getMarkersArray();

            // Loop through our array of markers & place each one on the map
            var insertedMarkers     = [],
                insertedInfoWindows = [];
            for(var i = 0; i < markers.length; i++ ) {
                // Marker
                var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
                bounds.extend(position);

                var marker = new google.maps.Marker({
                    animation   : google.maps.Animation.DROP,
                    position    : position,
                    icon        : markers[i][4],
                    map         : map,
                    title       : markers[i][0],
                    info        : markers[i][3],
                });

                insertedMarkers.push(marker);

                // Info window
                var infoWindow = new google.maps.InfoWindow({
                        content: markers[i][3]
                    });

                insertedInfoWindows.push(infoWindow);

                // Add a listener to the marker so that onClick, the infoWindow is visible
                google.maps.event.addListener(marker, 'click', function() {
                    map.setZoom(12);
                    map.panTo(this.getPosition());
                    self.closeAllInfoWindows();
                    infoWindow.setContent(this.info);
                    infoWindow.open(map, this);
                });
            }

            this.setProperties({
                insertedMarkers     : insertedMarkers,
                insertedInfoWindows : insertedInfoWindows
            });

            // Automatically center the map fitting all markers on the screen
            map.fitBounds(bounds);

            // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
            var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
                this.setZoom(11);
                google.maps.event.removeListener(boundsListener);
            });

            // Set the map
            this.set('map', map);
        }
    }.observes('inventory'),
});

The map works just fine except when I transition away from the route and back to it. When I transition away from the route where the component is being used and transition back to the route, two things happen:

1. The map layer disappears but the markers are visible (I see the markers on my page's background color)
2. If I open Chrome Developer Tools and click anywhere on the page, the map layer appears again except, it covers (bleeds into) its neighboring elements that are outside the scope of the component

What am I doing wrong? Could it be caused by the style computed property? I can't seem to find a solution to this.