steveosoule
8/28/2015 - 1:30 AM

Miva - Address AutoComplete

Miva - Address AutoComplete


<div clas="js-geocomplete-container">
  ...
  <input type="text" class="js-geocomplete-input">
  <input type="text" name="ShipFirstName">
  <input type="text" name="ShipLastName">
  <input type="text" name="ShipEmail">
  <input type="text" name="ShipPhone">
  <input type="text" name="ShipCompany">
  <input type="text" name="ShipAddress1">
  <input type="text" name="ShipCity">
  <input type="text" name="ShipZip">
  <input type="text" name="ShipStateSelect">
  <input type="text" name="ShipCountry">
  ---
</div>

<script src="//maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
var mvGAAC = {
	init: function(){
		$.getScript('//cdnjs.cloudflare.com/ajax/libs/geocomplete/1.6.5/jquery.geocomplete.min.js', mvGAAC.loaded);
	},
	loaded: function(){
		$('.js-geocomplete-input')
			.geocomplete()
			.bind('geocode:result', mvGAAC.result);
	},
	result: function(event, result){
		var $input = $(this),
			$container = $input.closest('.js-geocomplete-container');
		$.each(result.address_components, function(index, component){
			var component_type = component.types[0],
				component_value = component.long_name;

			switch (component_type){
				case 'street_number':
					streetNumber = component.long_name;
					break;
				case 'route':
					if(streetNumber){
						$container.find('[name$="Addr1"]').val(streetNumber + ' ' + component.long_name);
					} else {
						$container.find('[name$="Addr1"]').val(component.long_name);
					}
					break;
				case 'locality':
					$container.find('[name$="City"]').val(component.long_name);
					break;
				case 'administrative_area_level_1':
					$container.find('[name$="StateSelect"]').val(component.short_name);
					break;
				case 'country':
					$container.find('[name$="Country"]').val(component.short_name);
					break;
				case 'postal_code':
					$container.find('[name$="Zip"]').val(component.long_name);
					break;
				default:
					break;
			}
		});
	}
};
mvGAAC.init();