I have a script that geocodes an address for me. Now the search on googlemaps api works fine, only I have trouble to normalise the address into street, nr, postalcode, city and country.
Now the input string is in element address (id = query): <input type="text" id="query" size="25" name="city" value=components[4].long_name; />

I would like to fill in the address in seperate input elements: country, city, street, nr, postalcode. Postalcode and country are optional. If user does not fill it in, the postalcode will be returmed by the google api: components[7].long_name; and components[6].long_name;

The address, nr and city should be concatenated into a string with id = query. After the results: country, city, street, nr, postalcode should be filled in the form elements:
country: <input type="text" size="10" name="country" value=components[6].long_name; />
city: <input type="text" id="query" size="25" name="city" value=components[4].long_name; />
street:<input type="text" size="25" name="street" value=components[1].long_name; />
nr:<input type="text" size="10" name="nr" value=components[0].long_name; />
postalcode:<input type="text" size="10" name="pc" value=components[7].long_name; />

Who can help me with the javascripting to get this working, so the location data can be copied to next form?

Thanks in advance!

(ps: I'm not allowed to attach the html document, so i will post the code in two threads.
@Admin: why can't I upload attachments????)


HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>:: Geocode::</title>

<script>    
$(function() 
{        
	$( "#datepicker" ).datepicker();    
});    
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

var MAPFILES_URL = "http://maps.gstatic.com/intl/en_us/mapfiles/";

var map = null;
var geocoder = null;
var shadow = null;
var clickIcon = null;
var clickMarker = null;
var markers = null;
var selected = null;
var infowindow = null;
var boundsOverlay = null;
var viewportOverlay = null;
var initialized = false;
var hashFragment = "";

var GeocoderStatusDescription = {
  "OK": "The request did not encounter any errors",
  "UNKNOWN_ERROR": "A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known",
  "OVER_QUERY_LIMIT": "The webpage has gone over the requests limit in too short a period of time",
  "REQUEST_DENIED": "The webpage is not allowed to use the geocoder for some reason",
  "INVALID_REQUEST": "This request was invalid",
  "ZERO_RESULTS": "The request did not encounter any errors but returns zero results",
  "ERROR": "There was a problem contacting the Google servers"
};

var GeocoderLocationTypeDescription = {
  "ROOFTOP": "The returned result reflects a precise geocode.",
  "RANGE_INTERPOLATED": "The returned result reflects an approximation (usually on a road) interpolated between two precise points (such as intersections). Interpolated results are generally returned when rooftop geocodes are unavilable for a street address.",
  "GEOMETRIC_CENTER": "The returned result is the geometric center of a result such a line (e.g. street) or polygon (region).",
  "APPROXIMATE": "The returned result is approximate."
}

function init() {
  var params = parseUrlParams();
  clearOptions();
  setOptions(params);

  var mapOptions = {
    'zoom': (params.zoom ? params.zoom : 1),
    'center': (params.center ? params.center : new google.maps.LatLng(0.0,0.0)),
    'mapTypeId': google.maps.MapTypeId.ROADMAP,
    'scaleControl': true
  }
  map = new google.maps.Map(document.getElementById("map"), mapOptions);

  geocoder = new google.maps.Geocoder();

  infowindow = new google.maps.InfoWindow({
    'size': new google.maps.Size(292, 120)
  });

  shadow = new google.maps.MarkerImage(
    MAPFILES_URL + "shadow50.png",
    new google.maps.Size(37, 34),
    new google.maps.Point(0, 0),
    new google.maps.Point(10, 34)
  );

  clickIcon = new google.maps.MarkerImage(
    MAPFILES_URL + 'dd-start.png',
    new google.maps.Size(20, 34),
    new google.maps.Point(0, 0),
    new google.maps.Point(10, 34)
  );

  google.maps.event.addListener(map, 'click', onClickCallback);

  // Bounds changes are asynchronous in v3, so we have to wait for the idle
  // event to ensure that viewport biasing picks up the correct viewport
  google.maps.event.addListener(map, 'idle', function() {
    if (document.getElementById("street").value && ! initialized) {
      submitQuery();
    }
    initialized = true;
  });

  document.getElementById('query').onkeyup = function(e) {
    if (!e) var e = window.event;
    if (e.keyCode != 13) return;
    document.getElementById("query").blur();
    submitQuery();
  }

  setInterval(checkHashFragment, 200);
}

function onClickCallback(event){
    document.getElementById("query").value = event.latLng.toUrlValue(6);
    geocode({ 'latLng': event.latLng });

}

function checkHashFragment() {
  if (unescape(window.location.hash) != unescape(hashFragment)) {
    var params = parseUrlParams();
    clearOptions();
    setOptions(params);
    if (params.zoom && params.center) {
      map.setZoom(params.zoom);
      map.setCenter(params.center);
      initialized = false;
    } else if (document.getElementById("query").value) {
      submitQuery();
    }
  }
}

function parseUrlParams() {
  var params = {};

  if (window.location.search) {
    params.query = unescape(window.location.search.substring(1));
  }

  if (window.location.hash) {
    hashFragment = unescape(window.location.hash);
    var args = hashFragment.substring(1).split('&');
    for (var i in args) {
      var param = args[i].split('=');
      switch (param[0]) {
        case 'q':
          params.query = unescape(param[1]);
          break;
        case 'vpcenter':
          var center = parseLatLng(param[1]);
          if (center != null) {
            params.center = center;
          }
          break;
        case 'vpzoom':
          var zoom = parseInt(param[1]);
          if (! isNaN(zoom)) {
            params.zoom = zoom;
          }
          break;
        case 'country':
          params.country = unescape(param[1]);
          break;
        case 'language':
          params.language = unescape(param[1]);
          break;
      }
    }
  }

  return params;
}

function clearOptions() {
  document.getElementById("query").value = '';
  document.getElementById("biasViewport").checked = false;
  document.getElementById("country").value = '';
  document.getElementById("language").value = '';
}

function setOptions(params) {
  if (params.query) {
    document.getElementById("query").value = params.query;
  }

  if (params.zoom && params.center) {
    document.getElementById("biasViewport").checked = true;
  }

  if (params.country) {
    document.getElementById("country").value = params.country;
  }

  if (params.language) {
    document.getElementById("language").value = params.language;
  }
}

function submitQuery() {
  var query = document.getElementById("query").value;
  if (/\s*^\-?\d+(\.\d+)?\s*\,\s*\-?\d+(\.\d+)?\s*$/.test(query)) {
    var latlng = parseLatLng(query);
    if (latlng == null) {
      document.getElementById("query").value = "";
    } else {
      geocode({ 'latLng': latlng });
    }
  } else {
    geocode({ 'address': query });
  }
}

/**
 * Prepare a geocoding request and send it to the API.
 * @param {!google.maps.GeocoderRequest} request Geocoding request.
 */
function geocode(request) {
  resetMap();
  var query = '';

  if (request.latLng) {
    clickMarker = new google.maps.Marker({
      'position': request.latLng,
      'map': map,
      'title': request.latLng.toString(),
      'clickable': false,
      'icon': clickIcon,
      'shadow': shadow
    });
    query = request.latLng.toUrlValue();
  } else {
    query = request.address;
  }

  var vpbias = document.getElementById("biasViewport").checked;
  var country = document.getElementById("country").value;
  var language = document.getElementById("language").value;

  if (vpbias) {
    request.bounds = map.getBounds();
  }
  if (country) {
    request.country = country;
  }
  if (language) {
    request.language = language;
  }

  var hash = getPermalink(query);
  hashFragment = '#' + escape(hash);
  window.location.hash = escape(hash);
  geocoder.geocode(request, showResults);
}

/**
 * Build a permalink to represent the query and preferences.
 * @param {!string} query User-entered query.
 */
function getPermalink(query) {
  var hash = 'q=' + query;
  var vpbias = document.getElementById("biasViewport").checked;
  var country = document.getElementById("country").value;
  var language = document.getElementById("language").value;

  if (vpbias) {
    hash += '&vpcenter=' + map.getCenter().toUrlValue(6);
    hash += '&vpzoom=' + map.getZoom();
  }

  if (country) {
    hash += '&country=' + country;
  }

  if (language) {
    hash += '&language=' + language;
  }

  return hash
}

function parseLatLng(value) {
  value.replace('/\s//g');
  var coords = value.split(',');
  var lat = parseFloat(coords[0]);
  var lng = parseFloat(coords[1]);
  if (isNaN(lat) || isNaN(lng)) {
    return null;
  } else {
    return new google.maps.LatLng(lat, lng);
  }
}