Reverse Geocoding

by e_kurbanov

HTML

<div id="floating-panel">
  <input id="input" type="text">
  <input id="submit" type="button" value="Get addresses">
</div>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#floating-panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  width: 350px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
}
#latlng {
  width: 225px;
}

JavaScript

var geocoder= new google.maps.Geocoder();

function codeAddress(postcode) {
  geocoder.geocode({
    componentRestrictions: {
      country: 'Hungary',
      postalCode: postcode
    }
  }, function(results, status) {
    if (status == 'OK') {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
    } else {
      window.alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

var submit = document.getElementById('submit');
var inputValue = document.getElementById('input').value;

submit.addEventListener('click', function(){
	codeAddress(inputValue);
});