0_view_handler.js

var ViewHandlerMixin = Ember.Mixin.create({
  handles: [],
  concatenatedProperties: ['handles'],

  views: null,

  init: function(){
    this.set('views', Ember.Object.create());
    this._super();
  },

  hasHandle: function(name){
    return this.get('handles').indexOf(name) > -1;
  },

  connectHandle: function(handle, obj){
    if(this.hasHandle(handle)){
      this.set('views.' + handle, obj);
    }
  },

  disconnectHandle: function(handle){
    if(this.hasHandle(handle)){
      this.set('views.' + handle, undefined);
    }
  }
});

Ember.ControllerMixin.reopen(ViewHandlerMixin);
Ember.Component.reopen(ViewHandlerMixin);

Ember.View.reopen({
  handle: null,

  didInsertElement: function(){
    this._super();

    var handle = this.get('handle'),
        target = this.get('targetObject');

    if(handle && ViewHandlerMixin.detect(target)){
      target.connectHandle(handle, this);
    }
  },

  willDestroyElement: function(){
    var handle = this.get('handle'),
        target = this.get('targetObject');

    if(handle && ViewHandlerMixin.detect(target)){
      target.disconnectHandle(handle);
    }

    this._super();
  }
});

1_map_component.js

App.MyMapComponent = Ember.Component.extend({
  /* public API for modifying map state */

  panTo: function(lat, lng, zoom, options){
    ...
  },

  panBy: function(x, y, zoom, options){
    ...
  },

  ...
});

2_units_controller.js

App.UnitsController = Ember.ArrayController.extend({
  handles: ['map'],

  sidebarOpened: false,

  actions: {
    openSidebar: function(){
      this.set('sidebarOpened', true);
      this.get('views.map').panBy(-SIDEBAR_WIDTH / 2, 0);
    },

    closeSidebar: function(){
      this.set('sidebarOpened', false);
      this.get('views.map').panBy(SIDEBAR_WIDTH / 2, 0);
    },

    unitSelected: function(unit){
      this.get('views.map').panTo(unit.get('lat'), unit.get('lng'));
    }
  }
});

3_units.hbs

{{#my-map handle="map"}}
  {{#each controller}}
     {{#my-map-marker lat=lat lng=lng color=markerColor}}displayName{{/my-map-marker}}
  {{/each}}
{{/my-map}}

{{#if sidebarOpened}}
  <div class="sidebar">
    <button {{action "closeSidebar"}}>X</button>
    <ul>
      {{#each controller}}
      <li class="unit" {{action "unitSelected" this}}>
        {{displayName}}
      </li>
      {{/each}}
    </ul>
  </div>
{{else}}
  <button {{action "openSidebar"}}>Show Sidebar</button>
{{/if}}