title: jQuery Geocode to get Postal Address
body: <p>I am weak on jQuery and Javascript.  I would like to take this existing code and have it deliver the users full address in a postal format... like what you would put on a letter or fedex envelop.</p>
  
  <p>User begins to type address in the address box and the jQuery auto complete kicks in.  When user sees full address they then click on the address and I would like it to then propogate a test box with the users selection, but in the postal format.</p>
  
  <p>Here is the HTML page</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
  &lt;title&gt;Get Address Details&lt;/title&gt;
          &lt;script type="text/javascript" src="js/jquery-1.6.4.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
          &lt;script src="js/jquery-ui-1.8.7.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/jquery.ui.addresspicker.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              $(document).ready(function () {
                  $( "#address1" ).addresspicker({
                                elements: {
                                  locality: '#city',
                                  lat:      '#lat',
                                  lng:      '#lng',
                                  country:  '#country'
                                }
                              });
          });
          &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
   &lt;form action="submit.php" method="post"&gt;
        &lt;fieldset style="width: 300px; margin-bottom: 100px;"&gt;&lt;legend&gt;begin typing address&lt;/legend&gt;
        &lt;label for="address1"&gt;Input Address: &lt;/label&gt;&lt;input name="address1" id="address1" type="text"&gt;&lt;br /&gt;&lt;/fieldset&gt;
        &lt;fieldset style="width: 300px; text-align: right;"&gt;&lt;legend&gt;see results here&lt;/legend&gt;
        &lt;label for="address2"&gt;Street Address: &lt;/label&gt;&lt;input name="address2" id="address2" type="text"&gt;&lt;br /&gt;
  
        &lt;label for="lat"&gt;Lat: &lt;/label&gt;&lt;input name="lat" id="lat" type="text"&gt;&lt;br /&gt;
  
        &lt;label for="lng"&gt;Lng: &lt;/label&gt;&lt;input name="lng" id="lng" type="text"&gt;&lt;br /&gt;
  
        &lt;label for="city"&gt;City: &lt;/label&gt;&lt;input name="city" id="city" type="text"&gt;&lt;br /&gt;
  
        &lt;label for="country"&gt;Country: &lt;/label&gt;&lt;input name="country" id="country" type="text"&gt;&lt;br /&gt;&lt;br /&gt;
  
        &lt;label for="postal"&gt;Postal Address: &lt;/label&gt;&lt;textarea name="postal" id="postal" &gt;&lt;/textarea&gt;&lt;br /&gt;
  
        &lt;/fieldset&gt;
  
  &lt;/form&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>The javascript page for the address picker is below, and the other JS pages are current versions</p>
  
  <pre><code>/*
   * jQuery UI addresspicker @VERSION
   *
   * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
   * Dual licensed under the MIT or GPL Version 2 licenses.
   * http://jquery.org/license
   *
   * http://docs.jquery.com/UI/Progressbar
   *
   * Depends:
   *   jquery.ui.core.js
   *   jquery.ui.widget.js
   *   jquery.ui.autocomplete.js
   */
  (function( $, undefined ) {
  
  $.widget( "ui.addresspicker", {
      options: {
        appendAddressString: "",
          mapOptions: {
            zoom: 5,
            center: new google.maps.LatLng(46, 2),
            scrollwheel: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          },
          elements: {
            map: false,
            lat: false,
            lng: false,
            locality: false,
            country: false
          },
        draggableMarker: true
      },
  
      marker: function() {
          return this.gmarker;
      },
  
      map: function() {
        return this.gmap;
      },
  
    updatePosition: function() {
      this._updatePosition(this.gmarker.getPosition());
    },
  
    reloadPosition: function() {
      this.gmarker.setVisible(true);
      this.gmarker.setPosition(new google.maps.LatLng(this.lat.val(), this.lng.val()));
      this.gmap.setCenter(this.gmarker.getPosition());
    },
  
    selected: function() {
      return this.selectedResult;
    },
  
      _create: function() {
        this.geocoder = new google.maps.Geocoder();
        this.element.autocomplete({
              source: $.proxy(this._geocode, this),
              focus:  $.proxy(this._focusAddress, this),
              select: $.proxy(this._selectAddress, this)
          });
  
          this.lat      = $(this.options.elements.lat);
          this.lng      = $(this.options.elements.lng);
          this.locality = $(this.options.elements.locality);
          this.country  = $(this.options.elements.country);
          if (this.options.elements.map) {
            this.mapElement = $(this.options.elements.map);
          this._initMap();
          }
      },
  
    _initMap: function() {
      if (this.lat &amp;&amp; this.lat.val()) {
        this.options.mapOptions.center = new google.maps.LatLng(this.lat.val(), this.lng.val());
      }
  
      this.gmap = new google.maps.Map(this.mapElement[0], this.options.mapOptions);
      this.gmarker = new google.maps.Marker({
        position: this.options.mapOptions.center,
        map:this.gmap,
        draggable: this.options.draggableMarker});
      google.maps.event.addListener(this.gmarker, 'dragend', $.proxy(this._markerMoved, this));
      this.gmarker.setVisible(false);
    },
  
    _updatePosition: function(location) {
      if (this.lat) {
        this.lat.val(location.lat());
      }
      if (this.lng) {
        this.lng.val(location.lng());
      }
    },
  
    _markerMoved: function() {
      this._updatePosition(this.gmarker.getPosition());
    },
  
    // Autocomplete source method: fill its suggests with google geocoder results
    _geocode: function(request, response) {
      var address = request.term, self = this;
      this.geocoder.geocode( { 'address': address + this.options.appendAddressString}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          for (var i = 0; i &lt; results.length; i++) {
            results[i].label =  results[i].formatted_address;
          };
        }
        response(results);
      })
    },
  
    _findInfo: function(result, type) {
      for (var i = 0; i &lt; result.address_components.length; i++) {
        var component = result.address_components[i];
        if (component.types.indexOf(type) !=-1) {
          return component.long_name;
        }
      }
      return false;
    },
  
    _focusAddress: function(event, ui) {
      var address = ui.item;
      if (!address) {
        return;
      }
  
      if (this.gmarker) {
        this.gmarker.setPosition(address.geometry.location);
        this.gmarker.setVisible(true);
  
        this.gmap.fitBounds(address.geometry.viewport);
      }
      this._updatePosition(address.geometry.location);
  
      if (this.locality) {
        this.locality.val(this._findInfo(address, 'locality'));
      }
  
          if (this.address) {
        this.address.val(this._findInfo(address, 'address'));
      }
      if (this.country) {
        this.country.val(this._findInfo(address, 'country'));
      }
    },
  
    _selectAddress: function(event, ui) {
      this.selectedResult = ui.item;
    }
  });
  
  $.extend( $.ui.addresspicker, {
      version: "@VERSION"
  });
  
  
  // make IE think it doesn't suck
  if(!Array.indexOf){
      Array.prototype.indexOf = function(obj){
          for(var i=0; i&lt;this.length; i++){
              if(this[i]==obj){
                  return i;
              }
          }
          return -1;
      }
  }
  
  })( jQuery );
  </code></pre>