Ember-cli and Google Maps Search

I'm new in ember and recently I encounter some difficulties. I'm trying to use google map autocomplete. In my JavaScript example everything works great.

<html>
<head>
    <title>Autocomplete</title>
    <script src="" type="text/javascript"></script>
    <script type="text/javascript">
        function initialize() {
            var options = {
                types: ['(cities)']
            };
            var input = document.getElementById('searchField');
            var autocomplete = new google.maps.places.Autocomplete(input, options);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div>
        <input id="searchField" type="text" size="50" placeholder="Location..." autocomplete="off">
    </div>
</body>
</html>

But in my ember application when i select location with my mouse input box value is not changing (it works only for keyboard). For example. I'm writing New Yo, and then select New York from drop down list but my value is still New Yo

This is my code:

app/components/gmap-search.js

import Ember from 'ember';

export default Ember.Component.extend({
    searchTextField: function() {
            var options = {
                    types: ['(cities)']
                };
            var input = this.$('.search-field')[0];
            new window.google.maps.places.Autocomplete(input, options);
    }.on('didInsertElement')
});

app/templates/components/gmap-search.hbs

{{input class="search-field form-control" type="text" value=offer.location placeholder="" required="required"}}

app/templates/application.hbs

{{gmap-search offer=offer }}

I will be grateful for any help


ANSWERS:


I assume that the problem arises when submitting data to the server? It certainly should help:

submit: function() {
    this.set('offer.location', this.$('.search-field')[0].value);
    ... 
} 


 MORE:


 ? ember need multiple markers on google map that are draggable
 ? Ember js : deleteRecord TypeError: undefined is not a function
 ? Ember js : deleteRecord TypeError: undefined is not a function
 ? Ember js : deleteRecord TypeError: undefined is not a function
 ? Ember deleteRecord too much recursion
 ? Ember -- TypeError: arrangedContent.addArrayObserver is not a function
 ? deleteRecord not getting called in ember-data
 ? Ember data Error while loading route: TypeError: undefined is not a function
 ? Ember Data deleteRecord() followed by rollback() - how to make object reappear in list?
 ? Ember component - TypeError: store is undefined