vyshkant
@vyshkant
developer

Почему не вызывается метод Google Maps API (Place autocomplete)?

Здравствуйте! Внедряю RequireJS в разрабатываемый проект, появились некоторые сложности.
В одном из модулей есть кусок, отвечающий за инициализацию Place Autocomplete'а в соответствующем поле:
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);
                });
            },
            ...
        }
    }
);

Сама функция autocomplete_init вызывается из другого модуля, к которому подключена API.
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');
    }
);

Модуль destinations-map (подключен через shim) тоже работает с Google Maps API, он рисует маркеры - причем успешно.
В то же время, при запуске автокомплита никакого автокомплита не происходит, однако в консоль падает ошибка, указывающая на какой-то из подгружаемых минимизированных JS-скриптов, так что разобраться в чем именно ошибка я не могу.

ooCww6MnHPY.jpg
В то же время, как можно видеть из ошибки, последняя строчка моего кода, после которой начинается блуждание в дебрях Google API следующая: это функция autocomplete_init, а конкретно, следующая строчка
autocomplete = new google.maps.places.Autocomplete(input,
        { types: ['(cities)'] }
    );

Подскажите, в чем ошибка и как ее исправить? Как сделать, чтобы Place Autocomplete от Google Maps API заработал вместе с RequireJS?
  • Вопрос задан
  • 1519 просмотров
Решения вопроса 1
k12th
@k12th
console.log(`You're pulling my leg, right?`);
Вы передаете в конструктор автокомплита первым параметром jQuery-объект, а он ожидает HTMLInputElement.
autocomplete = new google.maps.places.Autocomplete(input[0], 
    { types: ['(cities)'] }
);
— должно решить проблему.

P.S. Удалите тэг requirejs, пожалуйста, он тут не при чем:)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы