API di compilazione automatica di Google

Question

Ho seguito questo tutorial per riempire automaticamente la città sulla base dell'indirizzo.

Ma quando ho provato a implementarlo, non ho la funzionalità che voglio. Voglio che dopo aver riempito l'indirizzo il campo della città dovrebbe essere riempito automaticamente. Qui di seguito è il mio codice:

<div class="form-group"> 
<label class="col-md-3 control-label" for="example-text-input">City</label> 
<div class="col-md-3"> 
<input type="text" id="crack" name="City" class="form-control" > 
</div> 
</div> 
<div class="form-group"> 
<label class="col-md-3 control-label" for="example-text-input">Area</label> 
<div class="col-md-3"> 
<input type="text" id="ar" name="Area" class="form-control" > 
</div> 
</div> 
<div class="form-group"> 
<label class="col-md-3 control-label" for="example-text- input">Address</label> 
<div class="col-md-3"> 
<input type="text" id="add" name="Address" class="form-control" > 
</div> 
</div> 

Di seguito è il codice javascript

<script> 
     var autocomplete = new google.maps.places.Autocomplete($("#crack")[0], {}); 

     google.maps.event.addListener(autocomplete, 'place_changed', function() { 
      var place = autocomplete.getPlace(); 
      console.log(place.address_components); 
     }); 
    </script> 
    <script> 
      var autocomplete = new google.maps.places.Autocomplete($("#add")[0], {}); 

      google.maps.event.addListener(autocomplete, 'place_changed', function() { 
       var place = autocomplete.getPlace(); 
       console.log(place.address_components); 
      }); 
         var placeSearch, autocomplete; 
var componentForm = { 
    crack: 'long_name', 
}; 

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

<?php include 'inc/template_end.php'; ?> 
<script type="text/javascript"> 
function hi() 
{ 
    var ele=(document.getElementById("sla").value); 
    if(ele==1) 
    { 
     document.getElementById("g1").style.display="none"; 
    } 
    else 
    { 
     document.getElementById("g1").style.display = "initial"; 
    } 
} 
</script> 

Answer 1

La ragione per cui non è stato popolando era dovuto al input tag id s è stato utilizzato: id="crack", id="ar", & id="add". Google utilizza id="locality", id="administrative_area_level_1", & id="route" rispettivamente.

Per non parlare del fatto che restituiscono molti altri campi di informazioni, quindi senza i tag input per riceverli, si riceveranno anche degli errori.

Quindi, con un po 'di mappatura del vostro input tag id s nella funzione fillInAddress(), oltre a mettere in un fermo per tutti gli altri campi restituiti, siamo in grado di realizzare la popolazione dei campi, come avevate sperato:

<div class="form-group"> 
    <label class="col-md-3 control-label" for="example-text-input">City</label> 
    <div class="col-md-3"> 
     <input type="text" id="crack" name="City" class="form-control"> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-md-3 control-label" for="example-text-input">Area</label> 
    <div class="col-md-3"> 
     <input type="text" id="ar" name="Area" class="form-control"> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-md-3 control-label" for="example-text- input">Address</label> 
    <div class="col-md-3"> 
     <input type="text" id="add" name="Address" onFocus="geolocate()" class="form-control"> 
    </div> 
</div> 

<script> 
    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 initialize(){ 
     autocomplete = new google.maps.places.Autocomplete(
      (document.getElementById('add')), 
      { 
       types: ['geocode'] 
      } 
     ); 

     google.maps.event.addListener(autocomplete, 'place_changed', function(){ 
      fillInAddress(); 
     }); 
    } 

    function fillInAddress(){ 
     var place = autocomplete.getPlace(); 

     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]]; 
       input = 1; 
       if (addressType === 'street_number') addressType = 'add'; 
       else if (addressType === 'route'){ 
        addressType = 'add'; 
        val = document.getElementById(addressType).value + ' ' + val; 
       } else if (addressType === 'locality') addressType = 'crack'; 
       else if (addressType === 'administrative_area_level_1') addressType = 'ar'; 
       else input = 0; 
       if (input) document.getElementById(addressType).value = val; 
      } 
     } 
    } 

    function geolocate(){ 
     if (navigator.geolocation){ 
      navigator.geolocation.getCurrentPosition(function(position){ 
       var geolocation = new google.maps.LatLng(
        position.coords.latitude, 
        position.coords.longitude 
       ); 
       var circle = new google.maps.Circle({ 
        center: geolocation, 
        radius: position.coords.accuracy 
       }); 
       autocomplete.setBounds(circle.getBounds()); 
      }); 
     } 
    } 

    initialize(); 
</script> 

http://jsfiddle.net/7t1p6oL1/