autocomplete fields (france- avenue, zipcode, city) with google map api v3

Question

So far I have this code running: https://google-developers.appspot.com/maps/documentation/javascript/examples/places-autocomplete

I have set the autocomplete to address1 text field. Its working fine.

What I need is when I select the right avenue, the zipcode and city must automatically fill the acode1 text field and city1 text field.

Example: Avenue Joffre, Épinay-sur-Seine, France (when I select this, I want only the 'Avenue Joffre' part to be present in the address1 text field. Then 'Epinay-sur-seine' in the city field and the zipcode of this address in the acode1 text field.

If possible please help me with the code or just give me some suggestions on how to reach this solution. I will try coding it myself and will post it here as answer.

In body:

 <input name="address1" id="address1" type="text"/>

 <input name="acode1" id="acode1" type="text"/>

 <input name="city1" id="city1" type="text"/>

In JS:

  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-33.8688, 151.2195),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'),
      mapOptions);


    var input = document.getElementById('address1');


    var autocomplete = new google.maps.places.Autocomplete(input);



    autocomplete.setComponentRestrictions({'country':'fr'});



    var infowindow = new google.maps.InfoWindow();
    var marker = new google.maps.Marker({
      map: map
    });


    google.maps.event.addListener(autocomplete, 'place_changed', function() 
    {
      infowindow.close();
      var place = autocomplete.getPlace();
      if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
      } else {
        map.setCenter(place.geometry.location);
        map.setZoom(17);  // Why 17? Because it looks good.
      }

      var image = new google.maps.MarkerImage(
          place.icon,
          new google.maps.Size(71, 71),
          new google.maps.Point(0, 0),
          new google.maps.Point(17, 34),
          new google.maps.Size(35, 35));
      marker.setIcon(image);
      marker.setPosition(place.geometry.location);

      var address = '';
      if (place.address_components) {
        address = [
          (place.address_components[0] && place.address_components[0].short_name || ''),
          (place.address_components[1] && place.address_components[1].short_name || ''),
          (place.address_components[2] && place.address_components[2].short_name || '')
        ].join(' ');
      }

      infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
      infowindow.open(map, marker);
    });

    // Sets a listener on a radio button to change the filter type on Places
    // Autocomplete.
    function setupClickListener(id, types) {
      var radioButton = document.getElementById(id);
      google.maps.event.addDomListener(radioButton, 'click', function() {
        autocomplete.setTypes(types);
      });
    }

    setupClickListener('changetype-all', []);
    setupClickListener('changetype-establishment', ['establishment']);
    setupClickListener('changetype-geocode', ['geocode']);
  }
  google.maps.event.addDomListener(window, 'load', initialize);

The options can be viewed in this page: http://code.google.com/p/geo-autocomplete/

Edit.................................

After a long research I am at this point now. It returns the address correctly, but I am having hard time with retrieving the postal code.

Ref: https://developers.google.com/maps/documentation/javascript/reference#PlaceResult

              var address = '';
      var code='';

     if(place.address_components){
     code = [place.address_components[0].types[0].postal_code];

          document.getElementById('acode1').value = code;
     }

      if (place.address_components) {  


        address = [
          (place.address_components[0] && place.address_components[0].short_name || ''),
          (place.address_components[1] && place.address_components[1].short_name || ''),
          (place.address_components[2] && place.address_components[2].short_name || '')
        ].join(' ');
      }

Answer 1

See this similar question: Get zipcode with geo-autocomplete in google api v3

This example

To get only the city, use type locality

code snippet:

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(-33.8688, 151.2195),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);

  var input = document.getElementById('searchTextField');
  var autocomplete = new google.maps.places.Autocomplete(input);

  autocomplete.bindTo('bounds', map);

  var infowindow = new google.maps.InfoWindow();
  var marker = new google.maps.Marker({
    map: map
  });

  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    infowindow.close();
    var place = autocomplete.getPlace();
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17); // Why 17? Because it looks good.
    }

    var image = new google.maps.MarkerImage(
      place.icon,
      new google.maps.Size(71, 71),
      new google.maps.Point(0, 0),
      new google.maps.Point(17, 34),
      new google.maps.Size(35, 35));
    marker.setIcon(image);
    marker.setPosition(place.geometry.location);

    var address = '';
    var zip_code = '';
    document.getElementById('zip_code').innerHTML = zip_code;
    if (place.address_components) {
      address = [
        (place.address_components[0] && place.address_components[0].short_name || ''),
        (place.address_components[1] && place.address_components[1].short_name || ''),
        (place.address_components[2] && place.address_components[2].short_name || '')
      ].join(' ');
      for (var i = 0; i < place.address_components.length; i++) {
        for (var j = 0; j < place.address_components[i].types.length; j++) {
          if (place.address_components[i].types[j] == "postal_code") {
            zip_code = place.address_components[i].long_name;
            document.getElementById('zip_code').innerHTML = zip_code;
          }
        }
      }
    }

    infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
    infowindow.open(map, marker);
  });

  // Sets a listener on a radio button to change the filter type on Places
  // Autocomplete.
  function setupClickListener(id, types) {
    var radioButton = document.getElementById(id);
    google.maps.event.addDomListener(radioButton, 'click', function() {
      autocomplete.setTypes(types);
    });
  }

  setupClickListener('changetype-all', []);
  setupClickListener('changetype-establishment', ['establishment']);
  setupClickListener('changetype-geocode', ['geocode']);
}
google.maps.event.addDomListener(window, 'load', initialize);

body {
  font-family: sans-serif;
  font-size: 14px;
}

#map_canvas {
  height: 400px;
  width: 600px;
  margin-top: 0.6em;
}

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places"></script>
<div>
  <input id="searchTextField" type="text" size="50">
  <input type="radio" name="type" id="changetype-all" checked="checked">
  <label for="changetype-all">All</label>

  <input type="radio" name="type" id="changetype-establishment">
  <label for="changetype-establishment">Establishments</label>

  <input type="radio" name="type" id="changetype-geocode">
  <label for="changetype-geocode">Geocodes</lable>
    </div>
<div id="zip_code"></div>
    <div id="map_canvas"></div>