Google Maps Autocomplete - Get short_name for state/province

google places autocomplete postal code
google places api example
google places api get all reviews
google places autocomplete example without map
restrict google maps autocomplete to city
address autocomplete api free
google api for country state city list
get address from latitude and longitude google map api

How do I get the short_name (eg. CA for California) from the address_components object?

This works fine to grab the "long_name":

var autocomplete;
var componentForm = {
    locality: 'long_name',
    administrative_area_level_1: 'long_name',
    country: 'long_name'
};

var place = autocomplete.getPlace();
var addCity, addProvince, addCountry;

for (var i = 0; i < place.address_components.length; i++) {

    var addressType =       place.address_components[i].types[0];

    if (componentForm[addressType]) {

        var val =       place.address_components[i][componentForm[addressType]];

        if(addressType == 'locality')                    addCity = val;
        if(addressType == 'administrative_area_level_1') addProvince = val;
        if(addressType == 'country')                     addCountry = val;
    }

}

(code from this example in the documentation)

Change:

var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};

to:

var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'long_name',
  country: 'long_name',
  postal_code: 'short_name'
};

working fiddle

code snippet:

// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.

var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'long_name',
  country: 'long_name',
  postal_code: 'short_name'
};

function initAutocomplete() {
  // Create the autocomplete object, restricting the search to geographical
  // location types.
  autocomplete = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */
    (document.getElementById('autocomplete')), {
      types: ['geocode']
    });

  // When the user selects an address from the dropdown, populate the address
  // fields in the form.
  autocomplete.addListener('place_changed', fillInAddress);
}

// [START region_fillform]
function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();

    for (var component in componentForm) {
      document.getElementById(component).value = '';
      document.getElementById(component).disabled = false;
    }

    // Get each component of the address from the place details
    // and fill the corresponding field on the form.
    for (var i = 0; i < place.address_components.length; i++) {
      var addressType = place.address_components[i].types[0];
      if (componentForm[addressType]) {
        var val = place.address_components[i][componentForm[addressType]];
        document.getElementById(addressType).value = val;
      }
    }
  }
  // [END region_fillform]

// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var geolocation = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        var circle = new google.maps.Circle({
          center: geolocation,
          radius: position.coords.accuracy
        });
        autocomplete.setBounds(circle.getBounds());
      });
    }
  }
  // [END region_geolocation]
google.maps.event.addDomListener(window, 'load', initAutocomplete);
#locationField,
#controls {
  position: relative;
  width: 480px;
}
#autocomplete {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 99%;
}
.label {
  text-align: right;
  font-weight: bold;
  width: 100px;
  color: #303030;
}
#address {
  border: 1px solid #000090;
  background-color: #f0f0ff;
  width: 480px;
  padding-right: 2px;
}
#address td {
  font-size: 10pt;
}
.field {
  width: 99%;
}
.slimField {
  width: 80px;
}
.wideField {
  width: 200px;
}
#locationField {
  height: 20px;
  margin-bottom: 2px;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="locationField">
  <input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"></input>
</div>

<table id="address">
  <tr>
    <td class="label">Street address</td>
    <td class="slimField">
      <input class="field" id="street_number" disabled="true"></input>
    </td>
    <td class="wideField" colspan="2">
      <input class="field" id="route" disabled="true"></input>
    </td>
  </tr>
  <tr>
    <td class="label">City</td>
    <td class="wideField" colspan="3">
      <input class="field" id="locality" disabled="true"></input>
    </td>
  </tr>
  <tr>
    <td class="label">State</td>
    <td class="slimField">
      <input class="field" id="administrative_area_level_1" disabled="true"></input>
    </td>
    <td class="label">Zip code</td>
    <td class="wideField">
      <input class="field" id="postal_code" disabled="true"></input>
    </td>
  </tr>
  <tr>
    <td class="label">Country</td>
    <td class="wideField" colspan="3">
      <input class="field" id="country" disabled="true"></input>
    </td>
  </tr>
</table>

Place Details | Places API, Get the Address for a Place ID � Geocoding Component Restriction � Region Code The Place Autocomplete Address Form sample captures selected address components from the Google Places <td class="label">State</td> postal_code: 'short_name' }; Get each component of the address from the place details, Find local businesses, view maps and get driving directions in Google Maps. When you have eliminated the JavaScript , whatever remains must be an empty page. Enable JavaScript to see Google Maps.

Thanks! Instead of changing the componentForm I just added:

place.address_components[i].short_name;

Here is the revised IF stmt:

if (componentForm[addressType]) {

    var val =       place.address_components[i][componentForm[addressType]];
    var valShort =  place.address_components[i].short_name;

    if(addressType == 'locality')                    addCity = val;
    if(addressType == 'administrative_area_level_1') addProvince = val;
    if(addressType == 'country')                     addCountry = val;


    if(addressType == 'administrative_area_level_1'){

        addProvinceShort = valShort;
    }

}

Place Autocomplete Address Form, How do I get the short_name (eg. CA for California) from the address_components object? This works fine to grab the "long_name": var autocomplete; var� See this step-by-step instruction to get your own API key – How to Get Google Maps JavaScript API Key. JavaScript Code. The JavaScript code has the following four sections. The initialize() method creates a Google map and points a location with a marker on Google map. Initially, a default position is shown on the map.

Another approach using JS Array methods, IMO more readable than a for loop with a nested if statement:

const city = address_components.find(item => item.types.includes('locality'))
const province = address_components.find(item => item.types.includes('administrative_area_level_1'))
const country = address_components.find(item => item.types.includes('country'))

const addCity = city.long_name
const addProvince = province.short_name
const addCountry = country.long_name

Get only city and state from Google Maps API Reverse Geocoder , geocoder = new google.maps. var state = results[i].address_components[2]. short_name; innerHTML = "The request to get user location timed out."; break� The Place Autocomplete sample demonstrates how to use the Place Autocomplete widget to provide a type-ahead search box.. The radio buttons allow you to filter the types of predictions that the autocomplete returns.

javascript, Nach einer Menge Forschung �ber die Google API docs scheint es so, als ob die province/state var province = predictionText.match(provincePattern)[0]; // Get� Note: Server-side libraries. This page describes the client-side library available with the Maps JavaScript API. If you want to work with the Places API web service on your server, take a look at the Node.js Client for Google Maps Services.

Maps API – Extract City to separate Field, Maps API – Extract City to separate Field To get this behavior your will need to implement your own code, for example, assuming that fieldname1, the field associated to Google Places fieldname5 for administrative_area_level_1 (state , province) postal_code: {'type':'short_name', 'field':'fieldname7'} }, place = this. If you do show a map, it must be a Google map. When you display predictions from the Place Autocomplete service without a map, you must include the 'Powered by Google' logo. The Place Autocomplete service can match on full words and substrings, resolving place names, addresses, and plus codes. Applications can therefore send queries as the user

Adding an Auto Complete Address Field to your Forms, Adding auto-complete to the address field on your forms makes a tremendous You can get a Free Google Maps API key here. postal_code: 'short_name'. 9. Note that the XML response consists of a single <GeocodeResponse> and two top-level elements: <status> contains metadata on the request. See Status codes below. Zero or more <result> elements, each containing a single set of geocoded address information and geometry information.