-1

私は、フォームに必要な入力を作成するために呼び出すvenueset()という関数をAPIの例の非常にわずかに変更したバージョンを使用しています。常に読み込まれるようです。ときどきオートコンプリート機能が働き、「オートコンプリート」フィールドは正常に動作し、「オートコンプリート」フィールドは通常のテキストボックスとなり、明白なAPI機能はありません。なぜ誰かが私が少しの方向性を与えて、時にはそれがうまくいっていない、他の時代が私に最も感謝してくれるのであれば、ありがとう。変更された例を含む不安定な結果

<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/28/1/intl/en_gb/common.js"></script> 
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/28/1/intl/en_gb/util.js"></script> 
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/28/1/intl/en_gb/controls.js"></script> 
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/28/1/intl/en_gb/places_impl.js"></script> 
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/28/1/intl/en_gb/stats.js"></script> 
</head> 
    <body> 

    <?php 

     function venueset() 
     { 
      echo ' 
     <div id="locationField"> 
     <input id="autocomplete" placeholder="Enter venue" onfocus="geolocate()" type="text" name="venue" autocomplete="off"> 
    </div> 

    <div id="address"> 
      <input type="hidden" class="field" name="name" id="business" disabled="true"> 
      <input type="hidden" class="field" name="number" id="street_number" disabled="true"> 
      <input type="hidden" class="field" name="street" id="route" disabled="true"> 
      <input type="hidden" class="field" name="city" id="locality" disabled="true"> 
      <input type="hidden" class="field" id="administrative_area_level_1" disabled="true"> 
      <input type="hidden" class="field" name="postcode" id="postal_code" disabled="true"> 
      <input type="hidden" class="field" name="country" id="country" disabled="true"> 
    </div> 
    '; 
    } 

    ?> 
    <!-- Replace the value of the key parameter with your own API key. --> 
    <script> 
     function initAutocomplete() { 
     var input = document.getElementById('autocomplete'); 
     var options = { 
      types: ['geocode', 'establishment'] 
     }; 
     autocomplete = new google.maps.places.Autocomplete(input, options); 

     autocomplete.addListener('place_changed', fillInAddress); 

     }; 

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

     for (var component in componentForm) { 
      document.getElementById(component).value = ''; 
      document.getElementById(component).disabled = false; 
     } 
     document.getElementById("business").value = place.name; 
     document.getElementById("business").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; 
      } 
     } 
     } 
    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?libraries=places&amp;callback=initAutocomplete" async="" defer=""></script> 
     <script type="text/javascript"> 
      // 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' 
    }; 



    // 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> 
    </body></html> 
     </script> 
     <script src="https://maps.googleapis.com/maps/api/js?key=api_key_removed&libraries=places&callback=initAutocomplete" 
      async defer></script> 
     </body> 
    </html> 

答えて

0

APIを正しく読み込んでいません。そのドキュメントからthe documentation

で説明したようにあなたはそれをロードする必要があります。

を次のブートストラップリクエストは地図のJavascript APIのgoogle.maps.geometryライブラリを要求する方法を示しています。

<script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry"> 

現在、 APIのub部分を個別に(たとえば、 https://maps.googleapis.com/maps-api-v3/api/js/28/1/intl/en_gb/common.js)、それは信頼できません。

+0

ありがとうございました!このトリックをしたようだ。 – Andrew

関連する問題