Javascript - Google Maps - オートフィル

Question

私は一緒にしているフォームを持って、私はそれが私のフィールドを自動補充しようとしています。私はそれの95％で成功していますが、適切なフォームフィールドに自動的に緯度/経度コードを入力するのが難しいです。ここで

は私のHTML

  <div class="control-group"> 
      <label class="control-label">Address *</label> 
       <div class="controls"> 
        <input value="" placeholder="Enter the customers full address" class="form-control" id="autocomplete" type="text"> 
       </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label">House Number</label> 
       <div class="controls"> 
        <input value="" class="form-control" id="street_number" disabled="true"> 
       </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label">Street Address</label> 
       <div class="controls">     
        <input value="" class="form-control" id="route" disabled="true"> 
       </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label">City</label> 
       <div class="controls"> 
        <input value="" class="form-control" id="locality" disabled="true"> 
       </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label">State</label> 
       <div class="controls"> 
        <input value="" class="form-control" id="administrative_area_level_1" disabled="true"> 
       </div> 
     </div>  
     <div class="control-group"> 
      <label class="control-label">Zipcode</label> 
       <div class="controls"> 
        <input value="" class="form-control" id="postal_code" disabled="true"> 
       </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label">Country</label> 
       <div class="controls"> 
        <input value="" class="form-control" id="country" disabled="true"> 
       </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label">Lat</label> 
       <div class="controls"> 
        <input value="" class="form-control" id="LatLngBounds" disabled="true"> 
       </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label">Long</label> 
       <div class="controls"> 
        <input value="" class="form-control" id="LatLngBounds" disabled="true"> 
       </div> 
     </div> 

されており、ここに私のJavascriptです。

var placeSearch, autocomplete; 
// Need to add Lat/Long to populate field. 
    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() { 
    autocomplete = new google.maps.places.Autocomplete((document.getElementById('autocomplete')),{ types: ['geocode']}); 
    autocomplete.addListener('place_changed', fillInAddress); 
} 

    function fillInAddress() { 
     var place = autocomplete.getPlace(); 
      for (var component in componentForm) { 
       document.getElementById(component).value = ""; 
       document.getElementById(component).disabled = true; 
      } 
      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; 
        } 
      } 
    } 

Answer 1

1. あなたのHTMLは無効です。 id = "LatLngBounds"の2つの要素があります。
2. フォームに緯度と経度の値を設定するコードはありません。それらを修正

は、それが私のために働く可能：

コードスニペット：

var placeSearch, autocomplete; 
 
    // Need to add Lat/Long to populate field. 
 
    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() { 
 
     autocomplete = new google.maps.places.Autocomplete((document.getElementById('autocomplete')), { 
 
     types: ['geocode'] 
 
     }); 
 
     autocomplete.addListener('place_changed', fillInAddress); 
 
    } 
 

 
    function fillInAddress() { 
 
     var place = autocomplete.getPlace(); 
 
     for (var component in componentForm) { 
 
     document.getElementById(component).value = ""; 
 
     document.getElementById(component).disabled = true; 
 
     } 
 
     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; 
 
     } 
 
     } 
 
     document.getElementById("Latitude").value = place.geometry.location.lat(); 
 
     document.getElementById("Longitude").value = place.geometry.location.lng(); 
 
    } 
 
    google.maps.event.addDomListener(window, "load", initAutocomplete);

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
 
<div class="control-group"> 
 
    <label class="control-label">Address *</label> 
 
    <div class="controls"> 
 
    <input value="Beacon St, Boston, MA" placeholder="Enter the customers full address" class="form-control" id="autocomplete" type="text"> 
 
    </div> 
 
</div> 
 
<div class="control-group"> 
 
    <label class="control-label">House Number</label> 
 
    <div class="controls"> 
 
    <input value="" class="form-control" id="street_number" disabled="true"> 
 
    </div> 
 
</div> 
 
<div class="control-group"> 
 
    <label class="control-label">Street Address</label> 
 
    <div class="controls"> 
 
    <input value="" class="form-control" id="route" disabled="true"> 
 
    </div> 
 
</div> 
 
<div class="control-group"> 
 
    <label class="control-label">City</label> 
 
    <div class="controls"> 
 
    <input value="" class="form-control" id="locality" disabled="true"> 
 
    </div> 
 
</div> 
 
<div class="control-group"> 
 
    <label class="control-label">State</label> 
 
    <div class="controls"> 
 
    <input value="" class="form-control" id="administrative_area_level_1" disabled="true"> 
 
    </div> 
 
</div> 
 
<div class="control-group"> 
 
    <label class="control-label">Zipcode</label> 
 
    <div class="controls"> 
 
    <input value="" class="form-control" id="postal_code" disabled="true"> 
 
    </div> 
 
</div> 
 
<div class="control-group"> 
 
    <label class="control-label">Country</label> 
 
    <div class="controls"> 
 
    <input value="" class="form-control" id="country" disabled="true"> 
 
    </div> 
 
</div> 
 
<div class="control-group"> 
 
    <label class="control-label">Lat</label> 
 
    <div class="controls"> 
 
    <input value="" class="form-control" id="Latitude" disabled="true"> 
 
    </div> 
 
</div> 
 
<div class="control-group"> 
 
    <label class="control-label">Long</label> 
 
    <div class="controls"> 
 
    <input value="" class="form-control" id="Longitude" disabled="true"> 
 
    </div> 
 
</div>