P A

Simple Places API autocomplete field

by Rene Rubio

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places"></script>
<input id="addressReg" placeholder="Enter your address" type="text" />

CSS

#autocomplete {
  width: 300px;
}

JavaScript

window.autocomplete('addressReg');
window.loadGoogleAutocompleteAddress_init = function(id) {
  // when inditex.iGooglePlacesEnabled && inditex.iGooglePlacesKey && inditex.iLocale are loaded && iLocale isn't CN
  if (window.iGooglePlacesEnabled &&
    window.iGooglePlacesKey &&
    window.autocomplete.loaded != true &&
    window.iLocale &&
    String(window.iLocale).substr(3, 2) != "CN") {

    var key = window.iGooglePlacesKey != null ? window.iGooglePlacesKey : 'AIzaSyBzBsyYSYrSAON0dYJ758q5Y1vuqJJag9Q';
    var lang = String(inditex.iLocale).substr(0, 2);
    var url = 'https://maps.googleapis.com/maps/api/js?key=' + key + '&libraries=places&offset=3&language=' + lang;

    window.loadGoogleAutocompleteAddress(url, id);
  }
};

window.createAutocompleteObj = function(id) {

  //Create the autocomplete object	
  var country = window.iStoreJSON.countryCode;
  var options = {
    types: ['address'],
    componentRestrictions: {
      country: country
    }
  };

  window.autocomplete.element =
    new google.maps.places.Autocomplete(document.getElementById(id), options);
  // When the user selects an address from the dropdown, populate the address
  // fields in the form.				

  window.autocomplete.element.addListener('place_changed', function() {
    window.autocomplete.fillInAddress(id)
  });
};

window.loadGoogleAutocompleteAddress = function(url, id) {
  if (window.jQuery && window.iGooglePlacesKey != undefined && window.iGooglePlacesKey != null) {
    $.when(
        $.getScript(url),
        $.Deferred(function(deferred) {
          $(deferred.resolve);
          console.info('google is loaded NOW!');
          window.autocomplete.loaded = true;
        })
      )
      .done(function(value) {

        console.log('Script loaded from:', value[1]);

        window.createAutocompleteObj(id);

      });
  }
};
window.autocomplete = function(id) {
  if (window.iGooglePlacesEnabled && window.iGooglePlacesKey) {
    var google_maps_library,
     ...