Google Maps Autocompletion API

Question

Googleマップの自動補完APIをプロジェクトに埋め込むようにしています。 ドキュメントに書かれているようなことはすべてやったが、このエラーを返す：Uncaught 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 %} 

は、

あなたの助けをありがとう

Answer 1

ヘッダーにAPIを呼び出すためだと思いますが、HTML文書の本文にはinitAutocompleteという関数があります。体はまだロードされていないこともあります。

<script src="https://maps.googleapis.com/maps/api/js?key=....&libraries=places&callback=initAutocomplete" async defer></script> 

右</body>タグの前に（とヘッダから削除）：

はちょうどこのコードを置きます。したがって、HTML文書の本文の最後の要素になります。この方法では、APIがロードされたときに常にinitAutocompleteを使用できるようにする必要があります。

Answer 2

私はこのエラーをどのように取得するのだろうか、私は時にはどのように動作するのだろうかと思う。 InvalidValueError：

<textarea id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" autofocus class="form-control"></textarea> 

：交換してくださいあなたは<textarea>を使用しますが、APIは<input>

が必要です。HTMLInputElementの

エラーが明らかであるのではないインスタンス

は、私はこのエラーを取得します

と

<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" autofocus class="form-control"/>