Google Autofill API

Question

I followed this tutorial to fill the city on the basis of address automatically.

But when I tried to implement it, I am not getting the functionality I want. I want that after filling the address the city field should automatically be filled. Below is my code:

<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>

Below is the javascript code

  <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

The reason it was not populating was due to the input tag ids you used: id="crack", id="ar", & id="add". Google uses id="locality", id="administrative_area_level_1", & id="route" respectively.

Not to mention they return several more fields of information, so without input tags to receive them, you would receive errors from that as well.

So with some mapping of your input tag ids in the fillInAddress() function, as well as putting in a catch for any other returned fields, we are able to accomplish population of the fields as you had hoped:

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