Why isn't the Google Maps API (Place autocomplete) method being called?

Question

Google

Hello! I am implementing RequireJS into a project under development, some difficulties have appeared.
In one of the modules there is a piece responsible for initializing the Place Autocomplete in the corresponding field:

define(
    ['jquery'],
    function($) {
        return {
            ...
            autocomplete_init : function(autocomplete_element, place_id_element) {
                var input = $('#'+autocomplete_element);
                
                autocomplete = new google.maps.places.Autocomplete(input,
                    { types: ['(cities)'] }
                );
                
                google.maps.event.addListener(autocomplete, 'place_changed', function() {
                    
                    var place = autocomplete.getPlace();
                    
                    // записываем id места в скрытый элемент формы (для передачи в пхп)
                    $('#'+place_id_element).val(place.place_id);
                });
            },
            ...
        }
    }
);

The autocomplete_init function itself is called from another module to which the API is connected.

require.config({
    baseUrl: 'js/lib',
    paths: {
        'app': '../app',
        jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min',
        async: 'require/async',
        'maps-api': 'https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places',
    },
    shim: {
        'maps-api': {
            deps: []
        },
        'destinations-map': {
            deps: ['jquery', 'async!maps-api']
        },
    },
});

require(
    ['jquery', 'app/form', 'destinations-map'],
    function($, form){
        ...
        // form - это модуль, в котором хранится показанная выше функция
        form.autocomplete_init('location_input', 'destination_place_id');
    }
);

The destinations-map module (connected via shim) also works with the Google Maps API, it draws markers - and successfully.
At the same time, when the autocomplete is started, no autocomplete occurs, however, an error falls into the console, pointing to one of the loaded minified JS scripts, so I can’t figure out exactly what the error is. At the same time, as you can see from the error, the last line of my code, after which wandering in the wilds of the Google API begins, is the following: this is the autocomplete_init function, and specifically, the following line

autocomplete = new google.maps.places.Autocomplete(input,
        { types: ['(cities)'] }
    );

Tell me, what is the error and how to fix it? How to make Place Autocomplete from Google Maps API work with RequireJS?

Answer 1

You pass a jQuery object as the first parameter to the autocomplete constructor, and it expects an HTMLInputElement .

autocomplete = new google.maps.places.Autocomplete(input[0], 
    { types: ['(cities)'] }
);

- should solve the problem.
PS Remove the requirejs tag, please, it has nothing to do with it :)