Google Maps自动补全API

我正在尝试将google maps自动补全API嵌入到我的项目中。我所做的一切都与文档中所写的一样，但是它向我返回了此错误：未捕获的InvalidValueError：initAutocomplete不是函数。有时，当我重新加载3次页面时，它终于可以工作了，这很奇怪……有人知道问题可能出在哪里吗？这是我做过的测试的链接：http : //www.dubair.ie/en/maps

这是页面的代码（关键脚本的链接在另一个文件的头部）：

{% extends "PlatformBundle::body.html.twig" %}

{% block content %}

    <div id="locationField" class="form-group col-xs-12">
        <textarea id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" autofocus class="form-control"></textarea>
    </div>

    <div id="details" class="hidden">
        <input disabled id="street_number"/>
        <input disabled id="route"/>
        <input disabled id="locality"/>
        <input disabled id="postal_code"/>
        <input disabled id="country"/>
    </div>

    <script>
        // This example displays an address form, using the autocomplete feature
        // of the Google Places API to help users fill in the information.

        // This example requires the Places library. Include the libraries=places
        // parameter when you first load the API. For example:
        // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

        var placeSearch, autocomplete;
        var componentForm = {
            street_number: 'short_name',
            route: 'long_name',
            locality: 'long_name',
//            administrative_area_level_1: 'short_name',
            country: 'long_name',
            postal_code: 'short_name'
        };

        function initAutocomplete() {
            // Create the autocomplete object, restricting the search to geographical
            // location types.
            autocomplete = new google.maps.places.Autocomplete(
                    /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
                    {types: ['geocode'], componentRestrictions: {country: 'ie'}});

            // When the user selects an address from the dropdown, populate the address
            // fields in the form.
            autocomplete.addListener('place_changed', fillInAddress);
        }

        function fillInAddress() {
            // Get the place details from the autocomplete object.
            var place = autocomplete.getPlace();

            $('#details').removeClass('hidden').hide().slideDown('slow');

            for (var component in componentForm) {
                document.getElementById(component).value = '';
//                document.getElementById(component).disabled = false;
            }

            // Get each component of the address from the place details
            // and fill the corresponding field on the form.
            for (var i = 0; i < place.address_components.length; i++) {
                var addressType = place.address_components[i].types[0];
                if (componentForm[addressType]) {
                    var val = place.address_components[i][componentForm[addressType]];
                    document.getElementById(addressType).value = val;
                }
            }
        }

        // Bias the autocomplete object to the user's geographical location,
        // as supplied by the browser's 'navigator.geolocation' object.
        function geolocate() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var geolocation = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };
                    var circle = new google.maps.Circle({
                        center: geolocation,
                        radius: position.coords.accuracy
                    });
                    autocomplete.setBounds(circle.getBounds());
                });
            }
        }
    </script>

{% endblock %}

感谢您的帮助