title: Retrieve info from google maps autocomplete
body: <p>I've this code that I use to generate a google map with autocomplete e some field that will autofill with info like lat, lng, adress and town. The problem is that I cant archieve to retrieve the correct value for town.</p>
  
  <p>Here is my code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt;
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #map {
      height: 100%;
    }
  .controls {
  margin-top: 10px;
  border: 1px solid transparent;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  height: 32px;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }
  
  #pac-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 300px;
  }
  
  #pac-input:focus {
  border-color: #4d90fe;
  }
  
  .pac-container {
  font-family: Roboto;
   }
  
  #type-selector {
  color: #fff;
  background-color: #4d90fe;
  padding: 5px 11px 0px 11px;
  }
  
  #type-selector label {
  font-family: Roboto;
  font-size: 13px;
  font-weight: 300;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;input id="pac-input" class="controls" type="text"
      placeholder="Enter a location"&gt;
  
  &lt;div id="map" style="width:500px; height:500px;"&gt;&lt;/div&gt;
  
  &lt;script&gt;
  function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -33.8688, lng: 151.2195},
  zoom: 13
  });
  var options = {
  componentRestrictions: {country: "it"}
  };
  
  var input = /** @type {!HTMLInputElement} */(
    document.getElementById('pac-input'));
  
  var autocomplete = new google.maps.places.Autocomplete(input, options);
  autocomplete.bindTo('bounds', map);
  
  var infowindow = new google.maps.InfoWindow();
  var marker = new google.maps.Marker({
  map: map,
  anchorPoint: new google.maps.Point(0, -29),
  });
  
  autocomplete.addListener('place_changed', function() {
  infowindow.close();
  marker.setVisible(false);
  var place = autocomplete.getPlace();
  
  if (!place.geometry) {
    window.alert("Autocomplete's returned place contains no geometry");
    return;
  }
  
  // If the place has a geometry, then present it on a map.
  if (place.geometry.viewport) {
    map.fitBounds(place.geometry.viewport);
  } else {
    map.setCenter(place.geometry.location);
    map.setZoom(17);  // Why 17? Because it looks good.
  }
  marker.setIcon(/** @type {google.maps.Icon} */({
    url: place.icon,
    size: new google.maps.Size(71, 71),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(17, 34),
    scaledSize: new google.maps.Size(35, 35)
  }));
  marker.setPosition(place.geometry.location);
  marker.setVisible(true);
  
  var address = '';
  if (place.address_components) {
    address = [
      (place.address_components[0] &amp;&amp; place.address_components[0].short_name || ''),
      (place.address_components[1] &amp;&amp; place.address_components[1].short_name || ''),
      (place.address_components[2] &amp;&amp; place.address_components[2].short_name || '')
    ].join(' ');
  }
  
  infowindow.setContent('&lt;div&gt;&lt;strong&gt;' + place.name + '&lt;/strong&gt;&lt;br&gt;' + address);
  infowindow.open(map, marker);
  
  
  
  var adress_form = address;
  document.getElementById('adress').value = adress_form
  
  var lat_form= place.geometry.location.lat();
  document.getElementById('lat').value = lat_form
  
  var lng_form= place.geometry.location.lng();
  document.getElementById('lng').value = lng_form
  
  function extractFromAdress(components, type){
  for (var i=0; i&lt;components.length; i++)
      for (var j=0; j&lt;components[i].types.length; j++)
          if (components[i].types[j]==type) return components[i].long_name;
  return "";
  }
  
  var town = extractFromAdress(results[0].address_components, "locality");
      document.getElementById('city').value = town
  });
  }
  &lt;/script&gt;
  &lt;form method="post" action="a.php"&gt;
  &lt;input placeholder="adress" type="text" id="adress" name="adress"&gt;
  &lt;input placeholder="city" type="text" id="city" name="city"&gt;
  &lt;input placeholder="lat" type="text" id="lat" name="lat"&gt;
  &lt;input placeholder="lng" type="text" id="lng" name="lng"&gt;
  &lt;input placeholder="latlng" type="text" id="latlng" name="latlng"&gt;
  &lt;input placeholder="name" type="text" id="name" name="name"&gt;
  &lt;input type="submit" value="inserisci"&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&amp;signed_in=true&amp;libraries=places&amp;callback=initMap"
      async defer&gt;&lt;/script&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>