InvalidValueError: не экземпляр HTMLInputElement - автозаполнение Google с Wordpress

Question

Я пытаюсь добавить поле автозаполнения Google в Wordpress в мой файл functions.php.

Я добавил этот код:

function initAutocomplete() {
    if (is_page ('9')) { 
        ?>
            <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=API_KEY&libraries=places"></script>
            <script type="text/javascript">
                var input = document.getElementById('autocomplete');
                var autocomplete = new google.maps.places.Autocomplete(input);
            </script>
        <?php
    }
}
add_action('wp_head', 'initAutocomplete');

идентификатор автозаполнения - это идентификаторполе внутри объекта HTML.

<div id="locationField">
  <input id="autocomplete"
         placeholder="Enter your address"
         type="text"/>
</div>

Я получаю эту ошибку обратно:

InvalidValueError: не является экземпляром HTMLInputElement

Я убедился, что это фактическое поле ввода.Я просто неправ в реализации?

Answer 1

Разобрался!

function initAutocomplete() {
    if (is_page ('compost-intake-form')) { 
        ?>
            <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=API_KEY&libraries=places"></script>
            <script type="text/javascript">
            jQuery(document).ready(function ($) {
                $(function(){
                  var complete;
                  var input = $("#autocomplete")[0];
                  complete = new google.maps.places.Autocomplete(input);
                });
            });
            </script>
        <?php
    }
}
add_action('wp_head', 'initAutocomplete');

[0] - выбрать элемент HTML из переменной.

Получил его отсюда.