geocode javascript probleem

Status
Niet open voor verdere reacties.
S

salsafreak

Nieuwe gebruiker
Lid geworden
15 mei 2007
Berichten
1
Ik heb een script dat adresgegevens aanvult op basis van straat, huisnummer en plaats. Dit gaat goed met de google api, alleen krijg ik de verschillende adres elementen niet in de daarvoor bedoelde input elementen.
Met bijgevoegde script kun je het uitproberen. Vul het adres en woonplaats allemaal in input element city!! Deze heeft id=query, welke gebruikt wordt door de google scripts: id = query): <input type="text" id="query" size="25" name="city" value=components[4].long_name; />

Het adres moet dus genormaliseerd worden naar de verschillende input elements van form "eerste". Dit formulier wordt aangevuld met postcode en land door de google api:
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; />

Wie kan me verder helpen?

Alvast dank!!

HTML: 
<!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);
  }
}

function resetMap() {
  infowindow.close();

  if (clickMarker != null) {
    clickMarker.setMap(null);
    clickMarker = null;
  }

  for (var i in markers) {
    markers[i].setMap(null);
  }

  markers = [];
  selected = null;
  clearBoundsOverlays();

  document.getElementById("responseCount").style.display = "none";
  document.getElementById("matches").style.display = "none";
}

function showResults(results, status) {
  var reverse = (clickMarker != null);

  if (! results) {
    alert("Geocoder did not return a valid response");
  } else {
    document.getElementById("statusValue").innerHTML = status;
    document.getElementById("statusDescription").innerHTML = GeocoderStatusDescription[status];

    document.getElementById("responseInfo").style.display = "block";
    document.getElementById("responseStatus").style.display = "block";

    if (status == google.maps.GeocoderStatus.OK) {
      document.getElementById("matchCount").innerHTML = results.length;
      document.getElementById("responseCount").style.display = "block";
      plotMatchesOnMap(results, reverse);
    } else {
      if (! reverse) {
        map.setCenter(new google.maps.LatLng(0.0, 0.0));
        map.setZoom(1);
      }
    }
  }
}

function plotMatchesOnMap(results, reverse) {

  markers = new Array(results.length);
  var resultsListHtml = "";

  var openInfoWindow = function(resultNum, result, marker) {
    return function() {
      if (selected != null) {
        document.getElementById('p' + selected).style.backgroundColor = "white";
        clearBoundsOverlays();
      }

      map.fitBounds(result.geometry.viewport);
      infowindow.setContent(getAddressComponentsHtml(result.address_components));
      infowindow.open(map, marker);

      if (result.geometry.bounds) {
        boundsOverlay = new google.maps.Rectangle({
          'bounds': result.geometry.bounds,
          'strokeColor': '#ff0000',
          'strokeOpacity': 1.0,
          'strokeWeight': 2.0,
          'fillOpacity': 0.0
        });
        boundsOverlay.setMap(map);
        google.maps.event.addListener(boundsOverlay, 'click', onClickCallback);
        document.getElementById('boundsLegend').style.display = 'block';
      } else {
        boundsOverlay = null;
      }

      viewportOverlay = new google.maps.Rectangle({
          'bounds': result.geometry.viewport,
          'strokeColor': '#0000ff',
          'strokeOpacity': 1.0,
          'strokeWeight': 2.0,
          'fillOpacity': 0.0
        });
      viewportOverlay.setMap(map);
      google.maps.event.addListener(viewportOverlay, 'click', onClickCallback);
      document.getElementById('viewportLegend').style.display = 'block';

      document.getElementById('p' + resultNum).style.backgroundColor = "#eeeeff";
      document.getElementById('matches').scrollTop =
        document.getElementById('p' + resultNum).offsetTop -
        document.getElementById('matches').offsetTop;
      selected = resultNum;
    }
  }

  for (var i = 0; i < results.length; i++) {
    var icon = new google.maps.MarkerImage(
      getMarkerImageUrl(i),
      new google.maps.Size(20, 34),
      new google.maps.Point(0, 0),
      new google.maps.Point(10, 34)
    );

    markers[i] = new google.maps.Marker({
      'position': results[i].geometry.location,
      'map': map,
      'icon': icon,
      'shadow': shadow
    });

    google.maps.event.addListener(markers[i], 'click', openInfoWindow(i, results[i], markers[i]));

    resultsListHtml += getResultsListItem(i, getResultDescription(results[i]));
  }

  document.getElementById("matches").innerHTML = resultsListHtml;
  document.getElementById("p0").style.border = "none";
  document.getElementById("matches").style.display = "block";
  document.getElementById("suggestions").innerHTML = getPostcodeLocalitiesSuggestion(results[0]);
  document.getElementById("suggestions").style.display = "block";

  if (reverse){
      // make a smooth movement to the clicked position
      map.panTo(clickMarker.getPosition());
      google.maps.event.addListenerOnce(map, 'idle', function(){
        selectMarker(0);
      });
  }

  else {
      zoomToViewports(results);
      selectMarker(0);
  }


}

function selectMarker(n) {
  google.maps.event.trigger(markers[n], 'click');
}

function zoomToViewports(results) {
  var bounds = new google.maps.LatLngBounds();

  for (var i in results) {
    bounds.union(results[i].geometry.viewport);
  }

  map.fitBounds(bounds);
}

function getMarkerImageUrl(resultNum) {
  return MAPFILES_URL + "marker" + String.fromCharCode(65 + resultNum) + ".png";
}

function getResultsListItem(resultNum, resultDescription) {
  var html  = '<a onclick="selectMarker(' + resultNum + ')">';
      html += '<div class="info" id="p' + resultNum + '">';
      html += '<table><tr valign="top">';
      html += '<td style="padding: 2px"><img src="'
           + getMarkerImageUrl(resultNum) + '"/></td>';
      html += '<td style="padding: 2px">' + resultDescription + '</td>';
      html += '</tr></table>';
      html += '</div></a>';
  return html;
}

/**
 * Get suggestions for a postcode with multiple localities.
 * @param {!google.maps.GeocoderResult} resultDescription Geocoding result.
 */
function getPostcodeLocalitiesSuggestion(resultDescription) {
  if (resultDescription.types.indexOf("postal_code") == -1) return "";
  console.log(resultDescription.postcode_localities.length + " localities");
  var postcode = resultDescription.address_components[0].long_name;
  var html = '<span class="dym">Did you mean</span>: '
      + '<span class="pc_localities">' + postcode + ' in ';
  for (i in resultDescription.postcode_localities) {
      var locality = resultDescription.postcode_localities[i];
      html += '<a href="#' + escape(getPermalink(postcode + ' ' + locality)) + '">';
      html += locality + '</a>';
      html += (i == resultDescription.postcode_localities.length - 1 ? '.' : ', ');
  }
  return html;
}

/**
 * Get a nicely formatted result description.
 * @param {!google.maps.GeocoderResult} result Geocoding result.
 */
function getResultDescription(result) {
  var bounds = result.geometry.bounds;
  var html  = '<table class="tabContent">';
      html += tr('Address', result.formatted_address);
  if (result.postcode_localities) {
      html += tr('Localities', result.postcode_localities.join('<br/>'));
  }
      html += tr('Types', result.types.join(", "));
      html += tr('Location', result.geometry.location.toString());
      html += tr('Bounds', (bounds ? boundsToHtml(bounds) : "None"));
      html += tr('Viewport', boundsToHtml(result.geometry.viewport));
      html += tr('Location type', result.geometry.location_type);
      if (result.partial_match) {
        html += tr('Partial match', 'Yes');
      }
      html += '</table>';
  return html;
}

function getAddressComponentsHtml(components) {
  var html = '<div class="infoWindowContent">' +
               '<table class="tabContent">';

  for (var i = 0; i < components.length; i++) {
    html += tr("Long name", components[i].long_name);
    html += tr("Short name", components[i].short_name);
    html += tr("Types", components[i].types[0]);
    html += tr("i", i);
    for (var j = 1; j < components[i].types.length; j++) {
      html += tr("", components[i].types[j]);
    }
    if (i < components.length-1) {
      html += br();
    }
  }

  html += '</table></div>';
  return html;
}

function tr(key, value) {
  return '<tr>' +
           '<td class="key">' + key + (key ? ':' : '') + '</td>' +
           '<td class="value">' + value + '</td>' +
         '</tr>';
}

function br() {
  return '<tr><td colspan="2"><div style="width: 100%; border-bottom: 1px solid grey; margin: 2px;"</td></tr>';
}

function clearBoundsOverlays() {
  if (boundsOverlay != null) {
    boundsOverlay.setMap(null);
    document.getElementById('boundsLegend').style.display = 'none';
  }
  if (viewportOverlay != null) {
    viewportOverlay.setMap(null);
    document.getElementById('viewportLegend').style.display = 'none';
  }
}

function boundsToHtml(bounds) {
  return '(' +
    bounds.getSouthWest().toUrlValue(6) +
    ') -<br/>(' +
    bounds.getNorthEast().toUrlValue(6) +
    ')';
}
</script>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function InitSaveVariables(form) {
street = components[1].long_name;
nr = components[0].long_name;
pc = components[7].long_name;
city = components[4].long_name;
country = components[6].long_name
'street = eerste.street.value;
'nr = eerste.nr.value;
'pc = eerste.pc.value;
'city = eerste.city.value;
'country = eerste.country.value;
}

function ShipToBillPerson(form) {
if (form.copy.checked) {
InitSaveVariables(form);
tweede.street2.value = components[1].long_name;
tweede.nr2.value = components[0].long_name;
tweede.pc2.value = components[7].long_name;
tweede.city2.value = components[4].long_name;
tweede.country2.value = components[6].long_name;
}
else {
tweede.street2.value = street;
tweede.nr2.value = nr;
tweede.pc2.value = pc;
tweede.city2.value = city;
tweede.country2.value = country;
   }
}
//  End -->
</SCRIPT>
<style>
#mapcontainer {
  position: relative;
  width: 640px;
  height: 480px;
  margin: 10px;
  float: left;
}

#map {
  width: 100%;
  height: 100%;
  border: 1px solid black;
  position: absolute;
}

#boundsLegend,#viewportLegend {
  position: absolute;
  background-color: white;
  right: 1px;
  font-family: sans-serif;
  font-size: small;
  padding: 2px;
  color: #222222;
  display: none;
}

#boundsLegend {
  border: 1px solid red;
  bottom: 40px;
}

#viewportLegend {
  border: 1px solid blue;
  bottom: 15px;
}

#responseStatus {
  display: none;
}

#responseCount {
  display: none;
}

#responseInfo {
  margin-top: 10px;
  margin-left: 10px;
  background-color: #eeeeee;
  border: 1px solid #999999;
  padding: 10px;
  width: 620px;
  display: none;
}

.info {
  border-top: 1px solid #666666;
  padding: 4px;
  padding-left: 8px;
  font: 10pt sans-serif;
  margin-left: 4px;
  margin-right: 4px;
  cursor: pointer;
  background-color: white;
}

.infoWindowContent {
  width: 272px;
  height: 120px;
  overflow: auto;
}

.tabContent {
  font: 10pt sans-serif;
  border-collapse: collapse;
  table-layout: auto;
}

#matches {
  margin-top: 10px;
  width: 320px;
  height: 490px;
  float: left;
  border: 1px solid #666666;
  display: none;
  overflow: auto;
}

h1 {
  border-bottom: 1px solid #999999;
  font-family: sans-serif;
  padding-bottom: 12px;
  width: 650px;
  margin-bottom: 0px;
}

#inputForm {
  width: 650px;
  margin: 10px;
}

#footer {
  padding-top: 4px;
  font-family: sans-serif;
  font-size: 8pt;
  clear: both;
  width: 650px;
  border-top: 1px solid #999999;
}

#instructions {
  padding-bottom: 8px;
}

.key {
  text-align: right;
  font-weight: bold;
  vertical-align: top;
  white-space: nowrap
}

.value {
  vertical-align: top;
}

#options {
  margin-top: 5px;
}

#suggestions {
  display: none;
}

span.dym {
  color: red;
}

span.dym,
span.pc_localities {
  font-size: 0.8em;
  font-family: sans-serif;
}

#biasViewport,#country {
  margin-right: 16px;
}

#newFeatures {
  position: absolute;
  top: 1px;
  right: -2px;
  background-color: #ffffd0;
  border: 1px solid black;
  font-family: sans-serif;
  font-size: 8pt;
  padding: 2px;
}
</style>
</head>
<body onload="init()">
</style>
  <div id="Main">
    <div id="wrapper">
      <!--******* Start Header *****-->
         <div id="header">
           <div class="header-Right">
         </div>
         <div id="Container">
            <div class="col-1">
              </div>
            </div>
            <div class="col-2">
               <div class="col-2-cont">
		    <div id="wrap">
        	<div class="cont_details">
				  <div id="suggestions"></div>
				  <div id="options">
					<span style="font-weight: bold">Bias this viewport:</span>
					<input type="checkbox" id="biasViewport"/>
					<span style="font-weight: bold">Country bias:</span>
					<input type="text" size="2" id="country"/>
					<span style="font-weight: bold">Language:</span>
					<input type="text" size="2" id="language"/>
				  </div>
				</div>
				<div id="responseInfo">
				  <div id="responseStatus">
					<div>
					  <span style="font-weight: bold">Geocoder response: </span>
					  <span id="statusValue"></span> (<span id="statusDescription"></span>)
					</div>
				  </div>
				  <div id="responseCount">
					<span style="font-weight: bold;">Matches returned: </span>
					<span id="matchCount"></span>
				  </div>
				</div>
				<div id="mapcontainer">
				  <div id="map"></div>
				  <div id="boundsLegend">Bounds</div>
				  <div id="viewportLegend">Viewport</div>
				</div>
				<div id="matches"></div>  
            <table width="725">
                 <form action="#" id="inputForm" name="eerste" onsubmit="submitQuery(this.street.value + ' ' + this.nr.value + ', ' + this.city.value + ', ' + this.country.value); return false">
               <tr>
                    <td width="180" height="30"><b>Country:</b></td>
                    <td width="230" height="30"><input type="text" size="25" name="country" value="" /></td>
                </tr>
				<tr id="city" style="font:24px bold;">
                    <td width="180" height="30"><b>City:</b></td>
                    <td width="230" height="30"><input type="text" id="query" size="25" name="city" value="Herengracht 110, Amsterdam" /> PC <input type="text" size="10" name="pc" value="" /></td>
                </tr>
			   <tr>
                    <td width="180"><b>Street:</b></td>
                    <td width="230"><input type="text" size="25" name="street" value="" /> nr <input type="text" size="10" name="nr" value="" /></td>
                </tr>
               <tr>
                    <td width="180" height="30">(Copy...): <input type="checkbox" name="copy" OnClick="javascript:ShipToBillPerson(this.form);" value="checkbox"> </td>
                    <td width="230" height="30"><input type="button" value="Search!" onclick="submitQuery()"/></td>
               </tr>   
             
</form></table>

			</div>  
	</div>			   
<hr />
    <div id="wrap">
        	<div class="cont_details">
			   <table width="725">
				<form name="tweede" method="post" action="saverelation.asp">
               <tr>
                    <td width="180" height="30"><b>Country:</b></td>
                    <td width="230" height="30"><input type="text" size="25" name="country" value="" disabled/></td>
                </tr>
                <tr>
                    <td width="180">
                        <b>Street:</b></td>
                    <td width="230">
                        <input type="text" size="34" name="street2" value="" id="street2" disabled /></td>
                </tr>
                <tr>
                    <td width="180">
                        <b>nr:</b></td>
                    <td width="230">
                        <input type="text" size="34" name="nr2" value="" id="nr2" disabled /></td>
                </tr>
                <tr>
                    <td width="180">
                        <b>PC:</b></td>
                    <td width="230">
                        <input type="text" size="34" name="PC" value="" id="PC" disabled /></td>
                </tr>
				<tr>
                    <td width="180">
                        <b>City:</b></td>
                    <td width="230">
                        <input type="text" size="34" name="city2" value="" id="city2" disabled /></td>
                </tr>
                <tr>
                   <td width="180">
                        <b>lat:</b></td>
                    <td width="230"><input type="text" size="34" name="lat" value="" id="lat" /></td>
                   <td width="180">
                        <b>lng:</b></td>
                    <td width="230"><input type="text" size="34" name="lng" value="" id="lng" /></td>
                </tr>
				</form>
            </table>
			</div>  
	</div><!--End of wrap-->
</div> 
</body>

</html>
 
Laatst bewerkt:
Onderwerp weer terug gezet. Gaarne het eerste bericht aanpassen naar Nederlands. We zijn een Nederlands forum.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan