EmberJs: binding input element from Ember.TextField in the init function (Autocomplete google map)

Question

I try to use the GoogleMap Autocomplete component. This Google Javascript service needs simply to be binded to an input field.

My idea was to create a new View extending TextField and do the binding as described bellow: I have a doubt regarding the "this" in the Autocomplete constructor (this, option). As you can easily understand,this is for me the input component... (the error it perhaps here)

App.AutoCompleAddressView = Ember.TextField.extend({
  type: 'text',
  init: function() {
    this._super();
    var options = {
      types: ['(cities)'],
      componentRestrictions: {country: 'fr'}
    };
  autocomplete = new google.maps.places.Autocomplete(this, options);
  }
});

and the html code template:

{{view App.AutoCompleAddressView}}

Unfortunately I get an Ember error: Uncaught TypeError: Object has no method 'getAttribute'

Answer 1

if the google.maps.places.Autocomplete requires a DOM element, then you have to pass this.$() to it. I think you have do to that in the didInsertElement hook. Something like:

App.AutoCompleAddressView = Ember.TextField.extend({
  type: 'text',
  didInsertElement: function() {
    var options = {
      types: ['(cities)'],
      componentRestrictions: {country: 'fr'}
    };
 //this.$() return the element as an array form, but google autocomplete seems to not accept this. So take the first one.
    new google.maps.places.Autocomplete(this.$()[0], options);
  }
});

Added a minimal example: http://jsfiddle.net/6p6XJ/211/