Google APIによる2つのオートコンプリートフィールド

Question

id="Pickup Location"とid="Drop Location"の2つのフィールドがあります。私はインドの都市の名前でフィールドを自動完成したいと思います。

<input type="text" value="" name="form[Pickup Location]" id="Pickup Location" onfocus="geolocate()" class="rsform-input-box"> 

<input type="text" value="" name="form[Drop Location]" id="Drop Location" onfocus="geolocate()" class="rsform-input-box"> 

Google APIコードは自動で完了し、完全に機能します。しかし、JSは入力フィールドのためにid="autocomplete"でのみ動作するように書かれています。

ここで、Pick LocationとDrop Locationの両方を受け入れるようにJSを書き直すにはどうすればよいですか？

PS：私はid=autocompleteフィールドを必要としないし、それを破棄します。

<input id="autocomplete" onFocus="geolocate()" type="text"> 

<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']}); 

     // 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(); 

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

Answer 1

コードにはかなりの変更が必要です.SOはコード作成サービスではありませんので、基本的なことを続けます。

fillInAddress()関数は、両方の場所の値を格納するためにhtml要素が必要です。これらの要素は存在しないので、私はそのコードを削除しました。

geolocate()機能は、あなたのコード内に存在しないマップ、上でプロットするために使用されるように見えますので、私はそれを削除しました。

以下は、オートコンプリート専用です。あなたはまだGoogleマップAPIを介してインドの都市だけを返す方法を把握する必要があります。

var placeSearch, pickupLocation, dropLocation; 
 

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

 
    dropLocation = new google.maps.places.Autocomplete(
 
    /** @type {!HTMLInputElement} */ 
 
    (document.getElementById('Drop_Location')), { 
 
     types: ['geocode'] 
 
    }); 
 
}

<input type="text" value="" name="form[Pickup Location]" id="Pickup_Location" placeholder="Pickup Location" class="rsform-input-box"> 
 

 
<input type="text" value="" name="form[Drop Location]" id="Drop_Location" placeholder="Drop Location" class="rsform-input-box"> 
 

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

Answer 2

以下のコードは、あなたの条件に応じてあなたのために働く必要があります！

function initAutocomplete() { 
 
    var myFirstEle = document.getElementById('firstEle'), 
 
    mySecondEle = document.getElementById('secondEle'); 
 
    generateAutoComplete(myFirstEle); 
 
    generateAutoComplete(mySecondEle); 
 

 
} 
 

 
function generateAutoComplete(ele) { 
 
    // Create the autocomplete object, restricting the search to geographical 
 
    // location types. 
 
    var autocomplete = new google.maps.places.Autocomplete(
 
    /** @type {!HTMLInputElement} */ 
 
    ele, { 
 
     types: ['geocode'] 
 
    }); 
 

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

 
} 
 

 
function fillInAddress(autocomplete) { 
 
    // 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; 
 
    } 
 

 
    // 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; 
 
     } 
 
    } 
 
    }