☰

同じページに複数のGoogleプレイスを追加する 質問する

tag-icon • tag-icon javascript google-places-api google-places
同じページに複数のGoogleプレイスを追加する 質問する

同じページに Google Places のオートコンプリートのインスタンスを 2 つ含めることを検討しています。ピックアップ場所の入力とドロップオフ場所の入力を設定したいと考えています。

これは入力要素の ID に関係していると思われますが、クラスに変更してもまだ機能しませんでした。

これは現在使用しているもので、最初のフィールドでは機能しますが、2 番目の入力フィールドを自動補完する方法や、単純な入力テキスト フィールド以外の何かであることを示す兆候を表示する方法がわかりません。

どのような助けでも大歓迎です！

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script>
<script type="text/javascript">
  var placeSearch,autocomplete;
  function initialize() {
    autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), { types: [ 'geocode' ] });
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
      fillInAddress();
    });
  }
  function fillInAddress() {
    var place = autocomplete.getPlace();

    for (var component in component_form) {
      document.getElementById(component).value = "";
      document.getElementById(component).disabled = false;
    }

    for (var j = 0; j < place.address_components.length; j++) {
      var att = place.address_components[j].types[0];
      if (component_form[att]) {
        var val = place.address_components[j][component_form[att]];
        document.getElementById(att).value = val;
      }
    }
  }
</script>

html

<body onload="initialize()">
<form action="" method="post" name="theform" id="theform">
    <label>Pickup Location</label>
    <input type="text" name="PickupLocation" onfocus="geolocate()" placeholder="Enter your pickup location" id="autocomplete" autocomplete="off" />

    <label>Dropoff Location</label>
    <input type="text" name="DropoffLocation" onfocus="geolocate()" placeholder="Enter your dropoff location" id="autocomplete2" autocomplete="off" />
</form>
</body>

ベストアンサー1

より動的なアプローチ。要素 ID を初期化する必要はありません。

var inputs = document.getElementsByClassName('query');

var options = {
  types: ['(cities)'],
  componentRestrictions: {country: 'fr'}
};

var autocompletes = [];

for (var i = 0; i < inputs.length; i++) {
  var autocomplete = new google.maps.places.Autocomplete(inputs[i], options);
  autocomplete.inputId = inputs[i].id;
  autocomplete.addListener('place_changed', fillIn);
  autocompletes.push(autocomplete);
}

function fillIn() {
  console.log(this.inputId);
  var place = this.getPlace();
  console.log(place. address_components[0].long_name);
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=AIzaSyC0Laj_Wk3kjFM-S8mYljc-WWCeesoDA_M"></script>

<input id="query-0" class="query" type="text"/>
<input id="query-1" class="query" type="text"/>
<input id="query-2" class="query" type="text"/>

おすすめ記事