Episerver Forms Address Control with validation. Based on: https://github.com/episerver/EPiServer.Forms.Samples

AddressInfo.cs

public class AddressInfo
    {
        public string address { get; set; }
        public string streetNumber { get; set; }
        public string street { get; set; }
        public string city { get; set; }
        public string state { get; set; }
        public string postalCode { get; set; }
        public string country { get; set; }
    }

AddressPickerElementBlock.ascx

<%@ import namespace="System.Web.Mvc" %>
<%@ import namespace="EPiServer.Web.Mvc.Html" %>
<%@ import namespace="EPiServer.Forms.Core" %>
<%@ import namespace="EPiServer.Forms.Core.Models" %>
<%@ import namespace="EPiServer.Forms.Helpers" %>
<%@ import namespace="EPiServer.Forms.Implementation.Elements" %>
<%@ import namespace="EPiServer.Framework.Localization" %>
<%@ import namespace="CHL.Web.Models.Elements" %>
<%@ import namespace="CHL.Web.Models.ViewModels" %>
<%@ control language="C#" inherits="ViewUserControl<AddressPickerElementBlock>" %>

<%  
    var formElement = Model.FormElement;
    var defaultValue = Model.GetDefaultValue();
    var addressInfo = defaultValue != null? defaultValue.ToObject<AddressInfo>() : new AddressInfo();
    var addressDetail = addressInfo.address;
    var route = addressInfo.street; 
    var city = addressInfo.city; 
    var state = addressInfo.state; 
    var postalCode = addressInfo.postalCode; 
    var country = addressInfo.country; 
%>

<div class="Form__Element Form__CustomElement FormAddressElement form-group" data-epiforms-element-name="<%: formElement.ElementName %>">
    <div class="form-item">
        <!-- Address detail-->
        <label for="<%: formElement.Guid + "_address" %>" class="Form__Element__Caption"><%: LocalizationService.Current.GetString("/contenttypes/addresspickerelementblock/viewmode/addresselement/addresslabel") %></label>
        <input name="address" id="<%: formElement.Guid + "_address" %>" type="text" class="Form__CustomInput FormAddressElement__Address" style="width:100%" value="<%: Model.PredefinedValue %>" <%: Html.Raw(Model.AttributesString) %> />
    </div>
    <div class="form-item">
        <!-- Formatted address -->
        <input name="formatted_address" id="<%: formElement.Guid + "_formatted_address" %>" type="hidden" class="Form__CustomInput FormAddressElement__FormattedAddress" value="<%: Model.PredefinedValue %>" <%: Html.Raw(Model.AttributesString) %> />
    </div>
    <div class="form-item">
        <!-- Street number -->
        <label for="<%: formElement.Guid + "_street_number" %>" class="Form__Element__Caption"><%: LocalizationService.Current.GetString("/contenttypes/addresspickerelementblock/viewmode/addresselement/numberlabel") %></label>
        <input name="street_number" id="<%: formElement.Guid + "_street_number" %>" type="text" class="Form__CustomInput FormAddressElement__StreetNumber" value="<%: Model.PredefinedValue %>" <%: Html.Raw(Model.AttributesString) %> />
    </div>
    <div class="form-item">
        <!-- Route-->
        <label for="<%: formElement.Guid + "_route" %>" class="Form__Element__Caption"><%: LocalizationService.Current.GetString("/contenttypes/addresspickerelementblock/viewmode/addresselement/streetlabel") %></label>
        <input name="route" id="<%: formElement.Guid + "_route" %>" type="text" class="Form__CustomInput FormAddressElement__Route" value="<%: Model.PredefinedValue %>" <%: Html.Raw(Model.AttributesString) %> />
    </div>
    <div class="form-item">
        <!-- City -->
        <label for="<%: formElement.Guid + "_locality" %>" class="Form__Element__Caption"><%: LocalizationService.Current.GetString("/contenttypes/addresspickerelementblock/viewmode/addresselement/citylabel") %></label>
        <input name="locality" id="<%: formElement.Guid + "_locality" %>" type="text" class="Form__CustomInput FormAddressElement__Locality" value="<%: Model.PredefinedValue %>" <%: Html.Raw(Model.AttributesString) %> />
    </div>
    <div class="form-item">
        <!-- State -->
        <label for="<%: formElement.Guid + "_administrative_area_level_1" %>" class="Form__Element__Caption"><%: LocalizationService.Current.GetString("/contenttypes/addresspickerelementblock/viewmode/addresselement/statelabel") %></label>
        <input name="administrative_area_level_1" id="<%: formElement.Guid + "_administrative_area_level_1" %>" type="text" class="Form__CustomInput FormAddressElement__State" value="<%: Model.PredefinedValue %>" <%: Html.Raw(Model.AttributesString) %> />
     </div>
    <div class="form-item">
        <!-- Zip code-->
        <label for="<%: formElement.Guid + "_postal_code" %>" class="Form__Element__Caption"><%: LocalizationService.Current.GetString("/contenttypes/addresspickerelementblock/viewmode/addresselement/postallabel") %></label>
        <input name="postal_code" id="<%: formElement.Guid + "_postal_code" %>" type="text" class="Form__CustomInput FormAddressElement__ZipCode" value="<%: Model.PredefinedValue %>" <%: Html.Raw(Model.AttributesString) %> />
    </div>
    <div class="form-item">
        <!-- Country-->
        <label for="<%: formElement.Guid + "_country" %>" class="Form__Element__Caption"><%: LocalizationService.Current.GetString("/contenttypes/addresspickerelementblock/viewmode/addresselement/countrylabel") %></label>
        <input name="country" id="<%: formElement.Guid + "_country" %>" type="text" class="Form__CustomInput FormAddressElement__Country" value="<%: Model.PredefinedValue %>" <%: Html.Raw(Model.AttributesString) %> />
    </div>
    <span data-epiforms-linked-name="<%: formElement.Code %>" class="Form__Element__ValidationError" style="display: none;">*</span>
</div>

AddressPickerElementBlock.cs

 [ContentType(
        DisplayName = "Address Picker",
        GroupName = "Form Elements",
        GUID = "2F3671A9-9FF3-44FB-869D-86DBAE44B21E")]
    public class AddressPickerElementBlock : TextboxElementBlock
    {
        [Ignore]
        public override string PlaceHolder { get; set; }

        /// <inheritdoc />
        [Ignore]
        public override string PredefinedValue { get; set; }

        /// <summary>
        /// Always use AddressValidator to validate this element
        /// <remarks>hide from EditView</remarks>
        /// </summary>
        [Display(GroupName = SystemTabNames.Content, Order = -5000)]
        [ScaffoldColumn(false)]
        public override string Validators
        {
            get
            {
                var customValidator = typeof(AddressValidator).FullName;
                var validators = this.GetPropertyValue(content => content.Validators);
                if (string.IsNullOrEmpty(validators))
                {
                    return customValidator;
                }
                else
                {
                    return string.Concat(validators, EPiServer.Forms.Constants.RecordSeparator, customValidator);
                }
            }

            set
            {
                this.SetPropertyValue(content => content.Validators, value);
            }
        }

        public override object GetSubmittedValue()
        {
            var rawSubmittedData = HttpContext.Current.Request.Form;
            var isJavaScriptSupport = rawSubmittedData.Get(EPiServer.Forms.Constants.FormWithJavaScriptSupport);
            if (isJavaScriptSupport == "true")
            {
                return base.GetSubmittedValue();
            }
            string[] addressComponents = rawSubmittedData.GetValues(this.Content.GetElementName());
            if (addressComponents == null || addressComponents.Length < 1)
            {
                return null;
            }
            // NOTE: submittedValue is an string with format: address_detail | number | street | city | state | postal_code | country
            AddressInfo addressObj = new AddressInfo()
            {
                address = addressComponents.Length > 0 ? addressComponents[0] : null,
                streetNumber = addressComponents.Length > 1 ? addressComponents[1] : null,
                street = addressComponents.Length > 2 ? addressComponents[2] : null,
                city = addressComponents.Length > 3 ? addressComponents[3] : null,
                state = addressComponents.Length > 4 ? addressComponents[4] : null,
                postalCode = addressComponents.Length > 5 ? addressComponents[5] : null,
                country = addressComponents.Length > 6 ? addressComponents[6] : null,
            };

            return addressObj.ToJson();
        }

        public virtual object GetFormattedValue()
        {
            var submittedValue = (GetSubmittedValue() as string) ?? string.Empty;
            return submittedValue;
        }

        public override string GetDefaultValue()
        {
            var defaultValue = PredefinedValue;

            var suggestedValues = GetAutofillValues();
            if (suggestedValues.Any())
            {
                var suggestedValue = suggestedValues.FirstOrDefault();
                if (!string.IsNullOrEmpty(suggestedValue))
                {
                    defaultValue = suggestedValue;
                }
            }

            // get submitted value in non-js mode
            var rawSubmittedData = HttpContext.Current.Request.Form;
            var isJavaScriptSupport = rawSubmittedData.Get(EPiServer.Forms.Constants.FormWithJavaScriptSupport);
            if (isJavaScriptSupport == null)
            {
                defaultValue = GetSubmittedValue() as string ?? defaultValue;
            }

            return defaultValue;
        }

        /// <summary>
        /// Set default values for this block
        /// </summary>
        /// <param name="contentType"></param>
        public override void SetDefaultValues(ContentType contentType)
        {
            base.SetDefaultValues(contentType);
        }

        /// <inheritdoc />
        public override IElementInfo GetElementInfo()
        {
            var baseInfo = base.GetElementInfo();
            baseInfo.CustomBinding = true;
            return baseInfo;
        }
    }

AddressValidator.cs

public class AddressValidator : InternalElementValidatorBase
    {
        private Injected<LocalizationService> _localizationService;
        protected LocalizationService LocalizationService { get { return _localizationService.Service; } }

        public override bool? Validate(IElementValidatable targetElement)
        {
            // if in js mode, the validation is done by an extenal service
            // if in non-js mode, just accept user input
            // so here, always return true
            return true;
        }

        /// <inheritdoc />
        /// we don't want to show this specific-validators to Editor. This validators always work programatically for AddressElement.
        public override bool AvailableInEditView
        {
            get
            {
                return false;
            }
        }

        /// <inheritdoc />
        public override IValidationModel BuildValidationModel(IElementValidatable targetElement)
        {
            var model = base.BuildValidationModel(targetElement);
            if (model != null)
            {
                model.Message = this.LocalizationService.GetString("/contenttypes/addresspickerelementblock/validators/invalidaddress");
            }

            return model;
        }
    }

    public interface IAddressValidateService
    {
        bool Validate(string address, string streetNumber, string street, string city, string state, string postalCode, string country, bool ignoreDetail);
    }

    [ServiceConfiguration(ServiceType = typeof(IAddressValidateService))]
    public class GoogleAddressValidateService : IAddressValidateService
    {
        private readonly string GoogleApiKey = GetApiKey();
        private const string GoogleMapsGeocodingAPI = "https://maps.googleapis.com/maps/api/geocode/json?";

        private readonly string currentPageLanguage = FormsExtensions.GetCurrentPageLanguage() ?? "en";

        public bool Validate(string address, string streetNumber, string street, string city, string state, string postalCode, string country, bool ignoreDetails = false)
        {

            if (string.IsNullOrWhiteSpace(GoogleApiKey))
            {
                return false;
            }

            if (string.IsNullOrEmpty(streetNumber) || string.IsNullOrEmpty(street) || string.IsNullOrEmpty(city) || string.IsNullOrEmpty(state) || string.IsNullOrEmpty(postalCode) || string.IsNullOrEmpty(country))
            {
                return false;
            }

            var verifyUrl = GoogleMapsGeocodingAPI;

            if (!ignoreDetails && !string.IsNullOrWhiteSpace(address))
            {
                verifyUrl = verifyUrl.AddQueryString("address", address);
            }

            // build components filter
            List<string> componentFilter = new List<string>();
            if (!string.IsNullOrWhiteSpace(streetNumber))
            {
                componentFilter.Add("street_number:" + streetNumber);
            }
            if (!string.IsNullOrWhiteSpace(street))
            {
                componentFilter.Add("route:" + street);
            }
            if (!string.IsNullOrWhiteSpace(city))
            {
                componentFilter.Add("locality:" + city);
            }
            if (!string.IsNullOrWhiteSpace(state))
            {
                componentFilter.Add("administrative_area:" + state);
            }
            if (!string.IsNullOrWhiteSpace(postalCode))
            {
                componentFilter.Add("postal_code:" + postalCode);
            }
            if (!string.IsNullOrWhiteSpace(country))
            {
                componentFilter.Add("country:" + country);
            }
            if (componentFilter.Count > 0)
            {
                verifyUrl = verifyUrl.AddQueryString("components", string.Join("|", componentFilter));
            }
            verifyUrl = verifyUrl.AddQueryString("key", GoogleApiKey);
            verifyUrl = verifyUrl.AddQueryString("language", currentPageLanguage);

            // delegate the validation for google place
            try
            {
                var client = new WebClient();
                var responseString = client.DownloadString(verifyUrl);
                var result = responseString.ToObject<GooglePlaceValidateResponse>();
                return result.status == GeocodingResponse.OK;
            }
            catch
            {
                return false;
            }
        }

        private static string GetApiKey()
        {
            if (string.IsNullOrEmpty(Settings.Instance.GoogleMapsApiV3Url))
            {
                return null;
            }
            Uri googleMapUri = new Uri(Settings.Instance.GoogleMapsApiV3Url);
            string apiKey = HttpUtility.ParseQueryString(googleMapUri.Query).Get("key");
            return apiKey;
        }
    }

    public class GooglePlaceValidateResponse
    {
        public string status { get; set; }
    }

    public class GeocodingResponse
    {
        public const string OK = "OK";
        public const string ZERO_RESULTS = "ZERO_RESULTS";
        public const string OVER_QUERY_LIMIT = "OVER_QUERY_LIMIT";
        public const string REQUEST_DENIED = "REQUEST_DENIED";
        public const string INVALID_REQUEST = "INVALID_REQUEST";
        public const string UNKNOWN_ERROR = "UNKNOWN_ERROR";
    }

epiforms.js

(function ($) {
    if (typeof (epi) == 'undefined' || typeof (epi.EPiServer) == 'undefined' || typeof (epi.EPiServer.Forms) == 'undefined') {
        console.error('EPiServer Forms was not properly initialized.');
        return;
    }
    if (typeof ($) == 'undefined') {
        console.error('jQuery must be loaded for EPiServer Forms to work.');
        return;
    }

    $(function () {
        $(".FormAddressElement__StreetNumber").prop("disabled", true);
        $(".FormAddressElement__Route").prop("disabled", true);
        $(".FormAddressElement__Locality").prop("disabled", true);
        $(".FormAddressElement__State").prop("disabled", true);
        $(".FormAddressElement__ZipCode").prop("disabled", true);
        $(".FormAddressElement__Country").prop("disabled", true);

    	   // $(".FormAddressElement__Address").geocomplete({
    		  //  details: ".FormAddressElement",
        //    types: ["address"],
        //    country: 'au'
        //});
        $(".FormAddressElement__Address").klebergeocomplete({
            details: ".FormAddressElement",
            types: ["address"],
            country: 'au'
        });
    });

    var _utilsSvc = epi.EPiServer.Forms.Utils,
        originalGetCustomElementValue = epi.EPiServer.Forms.Extension.getCustomElementValue,
        originalBindCustomElementValue = epi.EPiServer.Forms.Extension.bindCustomElementValue,
        addressesValidate = function validateAddress(fieldName, fieldValue, validatorMetaData) {
        var validateEnpoint = '/Validate/ValidateAddress';
        var validateResult = { isValid: false };
        $.ajax({
            url: validateEnpoint,
            type: "POST",
            async: false,
            data: JSON.parse(fieldValue),
            dataType: "json",
            success: function (valid) {
                validateResult.isValid = valid;
                if (!validateResult.isValid) validateResult.message = validatorMetaData.model.message;
            },
            error: function () {
                validateResult.isValid = false;
            }
        });
        return validateResult;
    }

    var customValidators = {
        Validators: {
            "CHL.Web.Business.Validators.AddressValidator": addressesValidate
        }
    };

    var customBindingElements = {
        CustomBindingElements: {
            "CHL.Web.Models.Elements.AddressPickerElementBlock": function (elementInfo, val) {
                if (!val) {
                    return;
                }
                var locationObj = JSON.parse(val);
                var locationString = locationObj.address;
                if (locationObj.streetNumber) {
                    locationString += ', ' + locationObj.streetNumber;
                }
                if (locationObj.street) {
                    locationString += ', ' + locationObj.street;
                }
                if (locationObj.city) {
                    locationString += ', ' + locationObj.city;
                }
                if (locationObj.state) {
                    locationString += ', ' + locationObj.state;
                }
                if (locationObj.country) {
                    locationString += ', ' + locationObj.country;
                }
                return locationString;
            }
        }
    };

    var customExtension = {
        Extension: {
            // OVERRIDE, process to get value from datetime picker element
            getCustomElementValue: function ($element) {

                if ($element.hasClass("FormAddressElement")) {

                    var address = $('.FormAddressElement__Address', $element).first().val(),
                        country = $('.FormAddressElement__Country', $element).first().val(),
                        state = $('.FormAddressElement__State', $element).first().val(),
                        city = $('.FormAddressElement__Locality', $element).first().val(),
                        postalCode = $('.FormAddressElement__ZipCode', $element).first().val(),
                        street = $('.FormAddressElement__Route', $element).first().val(),
                        streetNumber = $('.FormAddressElement__StreetNumber', $element).first().val();

                    return JSON.stringify({
                        address: address,
                        streetNumber: streetNumber,
                        street: street,
                        city: city,
                        state: state,
                        postalCode: postalCode,
                        country: country
                    });
                }

                // if current element is not our job, let others process
                return originalGetCustomElementValue.apply(this, [$element]);
            },
            // OVERRIDE, custom binding data for date/time/datetime picker and date-time-range picker
            bindCustomElementValue: function ($element, val) {
                if ($element.hasClass('FormAddressElement')) {
                    var $addressEl = $element.find(".FormAddressElement__Address");
                    var $countryEl = $element.find(".FormAddressElement__Country");
                    var $stateEl = $element.find(".FormAddressElement__State");
                    var $cityEl = $element.find(".FormAddressElement__Locality");
                    var $routeEl = $element.find(".FormAddressElement__Route");
                    var $zipEl = $element.find(".FormAddressElement__ZipCode");
                    var $numberEl = $element.find(".FormAddressElement__StreetNumber");
                    var addressInfo = JSON.parse(val);
                    $countryEl.val(addressInfo.country);
                    $zipEl.val(addressInfo.postalCode);
                    $stateEl.val(addressInfo.state);
                    $cityEl.val(addressInfo.city);
                    $routeEl.val(addressInfo.street);
                    $addressEl.val(addressInfo.address);
                    $numberEl.val(addressInfo.streetNumber);
                    return;
                }

                // if current element is not our job, let others process
                return originalBindCustomElementValue.apply(this, [$item, val]);
            }
        }
    };


    $.extend(true, epi.EPiServer.Forms, customValidators, customBindingElements, customExtension);

})(jQuery);

FormsViewModelExternalResources.cs

[ServiceConfiguration(ServiceType = typeof(IViewModeExternalResources))]
    public class FormsViewModeExternalResource : IViewModeExternalResources
    {
        public IEnumerable<Tuple<string, string>> Resources
        {
            get
            {
                var googleMapScript = string.Empty;
                if (!string.IsNullOrWhiteSpace(Settings.Instance.GoogleMapsApiV3Url))
                {
                    googleMapScript = Settings.Instance.GoogleMapsApiV3Url + "&asensor=false&libraries=places";
                }
                else
                {
                    googleMapScript = "https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places";
                }

                return new List<Tuple<string, string>>
                {
                    new Tuple<string, string>("script", googleMapScript),
                    //new Tuple<string, string>("script", "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"),
                    new Tuple<string, string>("script", "/Static/js/frameworks/jquery.geocomplete.js"),
                    new Tuple<string, string>("script", "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"),
                    new Tuple<string, string>("css", "https://code.jquery.com/ui/1.7.1/themes/smoothness/jquery-ui.css"),
                    new Tuple<string, string>("script", "/Static/js/frameworks/jquery.geocomplete.kleber.js"),
                    new Tuple<string, string>("script", "/Static/js/chc.epiforms.js"),
                };
            }
        }
    }

jquery.geocomplete.js

/**
 * jQuery Geocoding and Places Autocomplete Plugin - V 1.7.0
 *
 * @author Martin Kleppe <[email protected]>, 2016
 * @author Ubilabs http://ubilabs.net, 2016
 * @license MIT License <http://www.opensource.org/licenses/mit-license.php>
 */

// # $.geocomplete()
// ## jQuery Geocoding and Places Autocomplete Plugin
//
// * https://github.com/ubilabs/geocomplete/
// * by Martin Kleppe <[email protected]>

(function($, window, document, undefined){

  // ## Options
  // The default options for this plugin.
  //
  // * `map` - Might be a selector, an jQuery object or a DOM element. Default is `false` which shows no map.
  // * `details` - The container that should be populated with data. Defaults to `false` which ignores the setting.
  // * 'detailsScope' - Allows you to scope the 'details' container and have multiple geocomplete fields on one page. Must be a parent of the input. Default is 'null'
  // * `location` - Location to initialize the map on. Might be an address `string` or an `array` with [latitude, longitude] or a `google.maps.LatLng`object. Default is `false` which shows a blank map.
  // * `bounds` - Whether to snap geocode search to map bounds. Default: `true` if false search globally. Alternatively pass a custom `LatLngBounds object.
  // * `autoselect` - Automatically selects the highlighted item or the first item from the suggestions list on Enter.
  // * `detailsAttribute` - The attribute's name to use as an indicator. Default: `"name"`
  // * `mapOptions` - Options to pass to the `google.maps.Map` constructor. See the full list [here](http://code.google.com/apis/maps/documentation/javascript/reference.html#MapOptions).
  // * `mapOptions.zoom` - The inital zoom level. Default: `14`
  // * `mapOptions.scrollwheel` - Whether to enable the scrollwheel to zoom the map. Default: `false`
  // * `mapOptions.mapTypeId` - The map type. Default: `"roadmap"`
  // * `markerOptions` - The options to pass to the `google.maps.Marker` constructor. See the full list [here](http://code.google.com/apis/maps/documentation/javascript/reference.html#MarkerOptions).
  // * `markerOptions.draggable` - If the marker is draggable. Default: `false`. Set to true to enable dragging.
  // * `markerOptions.disabled` - Do not show marker. Default: `false`. Set to true to disable marker.
  // * `maxZoom` - The maximum zoom level too zoom in after a geocoding response. Default: `16`
  // * `types` - An array containing one or more of the supported types for the places request. Default: `['geocode']` See the full list [here](http://code.google.com/apis/maps/documentation/javascript/places.html#place_search_requests).
  // * `blur` - Trigger geocode when input loses focus.
  // * `geocodeAfterResult` - If blur is set to true, choose whether to geocode if user has explicitly selected a result before blur.
  // * `restoreValueAfterBlur` - Restores the input's value upon blurring. Default is `false` which ignores the setting.

  var defaults = {
    bounds: true,
    strictBounds: false,
    country: null,
    map: false,
    details: false,
    detailsAttribute: "name",
    detailsScope: null,
    autoselect: true,
    location: false,

    mapOptions: {
      zoom: 14,
      scrollwheel: false,
      mapTypeId: "roadmap"
    },

    markerOptions: {
      draggable: false
    },

    maxZoom: 16,
    types: ['geocode'],
    blur: false,
    geocodeAfterResult: false,
    restoreValueAfterBlur: false
  };

  // See: [Geocoding Types](https://developers.google.com/maps/documentation/geocoding/#Types)
  // on Google Developers.
  var componentTypes = ("street_address route intersection political " +
    "country administrative_area_level_1 administrative_area_level_2 " +
    "administrative_area_level_3 colloquial_area locality sublocality " +
    "neighborhood premise subpremise postal_code natural_feature airport " +
    "park point_of_interest post_box street_number floor room " +
    "lat lng viewport location " +
    "formatted_address location_type bounds").split(" ");

  // See: [Places Details Responses](https://developers.google.com/maps/documentation/javascript/places#place_details_responses)
  // on Google Developers.
  var placesDetails = ("id place_id url website vicinity reference name rating " +
    "international_phone_number icon formatted_phone_number").split(" ");

  // The actual plugin constructor.
  function GeoComplete(input, options) {

    this.options = $.extend(true, {}, defaults, options);

    // This is a fix to allow types:[] not to be overridden by defaults
    // so search results includes everything
    if (options && options.types) {
      this.options.types = options.types;
    }

    this.input = input;
    this.$input = $(input);

    this._defaults = defaults;
    this._name = 'geocomplete';

    this.init();
  }

  // Initialize all parts of the plugin.
  $.extend(GeoComplete.prototype, {
    init: function(){
      this.initMap();
      this.initMarker();
      this.initGeocoder();
      this.initDetails();
      this.initLocation();
    },

    // Initialize the map but only if the option `map` was set.
    // This will create a `map` within the given container
    // using the provided `mapOptions` or link to the existing map instance.
    initMap: function(){
      if (!this.options.map){ return; }

      if (typeof this.options.map.setCenter == "function"){
        this.map = this.options.map;
        return;
      }

      this.map = new google.maps.Map(
        $(this.options.map)[0],
        this.options.mapOptions
      );

      // add click event listener on the map
      google.maps.event.addListener(
        this.map,
        'click',
        $.proxy(this.mapClicked, this)
      );

      // add dragend even listener on the map
      google.maps.event.addListener(
        this.map,
        'dragend',
        $.proxy(this.mapDragged, this)
      );

      // add idle even listener on the map
      google.maps.event.addListener(
        this.map,
        'idle',
        $.proxy(this.mapIdle, this)
      );

      google.maps.event.addListener(
        this.map,
        'zoom_changed',
        $.proxy(this.mapZoomed, this)
      );
    },

    // Add a marker with the provided `markerOptions` but only
    // if the option was set. Additionally it listens for the `dragend` event
    // to notify the plugin about changes.
    initMarker: function(){
      if (!this.map){ return; }
      var options = $.extend(this.options.markerOptions, { map: this.map });

      if (options.disabled){ return; }

      this.marker = new google.maps.Marker(options);

      google.maps.event.addListener(
        this.marker,
        'dragend',
        $.proxy(this.markerDragged, this)
      );
    },

    // Associate the input with the autocompleter and create a geocoder
    // to fall back when the autocompleter does not return a value.
    initGeocoder: function(){

      // Indicates is user did select a result from the dropdown.
      var selected = false;

      var options = {
        types: this.options.types,
        bounds: this.options.bounds === true ? null : this.options.bounds,
        componentRestrictions: this.options.componentRestrictions,
        strictBounds: this.options.strictBounds
      };

      if (this.options.country){
        options.componentRestrictions = {country: this.options.country};
      }

      this.autocomplete = new google.maps.places.Autocomplete(
        this.input, options
      );

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

      // Bind autocomplete to map bounds but only if there is a map
      // and `options.bindToMap` is set to true.
      if (this.map && this.options.bounds === true){
        this.autocomplete.bindTo('bounds', this.map);
      }

      // Watch `place_changed` events on the autocomplete input field.
      google.maps.event.addListener(
        this.autocomplete,
        'place_changed',
        $.proxy(this.placeChanged, this)
      );

      // Prevent parent form from being submitted if user hit enter.
      this.$input.on('keypress.' + this._name, function(event){
        if (event.keyCode === 13){ return false; }
      });

      // Assume that if user types anything after having selected a result,
      // the selected location is not valid any more.
      if (this.options.geocodeAfterResult === true){
        this.$input.bind('keypress.' + this._name, $.proxy(function(){
          if (event.keyCode != 9 && this.selected === true){
              this.selected = false;
          }
        }, this));
      }

      // Listen for "geocode" events and trigger find action.
      this.$input.bind('geocode.' + this._name, $.proxy(function(){
        this.find();
      }, this));

      // Saves the previous input value
      this.$input.bind('geocode:result.' + this._name, $.proxy(function(){
        this.lastInputVal = this.$input.val();
      }, this));

      // Trigger find action when input element is blurred out and user has
      // not explicitly selected a result.
      // (Useful for typing partial location and tabbing to the next field
      // or clicking somewhere else.)
      if (this.options.blur === true){
        this.$input.on('blur.' + this._name, $.proxy(function(){
          if (this.options.geocodeAfterResult === true && this.selected === true) { return; }

          if (this.options.restoreValueAfterBlur === true && this.selected === true) {
            setTimeout($.proxy(this.restoreLastValue, this), 0);
          } else {
            this.find();
          }
        }, this));
      }
    },

    // Prepare a given DOM structure to be populated when we got some data.
    // This will cycle through the list of component types and map the
    // corresponding elements.
    initDetails: function(){
      if (!this.options.details){ return; }

      if(this.options.detailsScope) {
        var $details = $(this.input).parents(this.options.detailsScope).find(this.options.details);
      } else {
        var $details = $(this.options.details);
      }

      var attribute = this.options.detailsAttribute,
        details = {};

      function setDetail(value){
        details[value] = $details.find("[" +  attribute + "=" + value + "]");
      }

      $.each(componentTypes, function(index, key){
        setDetail(key);
        setDetail(key + "_short");
      });

      $.each(placesDetails, function(index, key){
        setDetail(key);
      });

      this.$details = $details;
      this.details = details;
    },

    // Set the initial location of the plugin if the `location` options was set.
    // This method will care about converting the value into the right format.
    initLocation: function() {

      var location = this.options.location, latLng;

      if (!location) { return; }

      if (typeof location == 'string') {
        this.find(location);
        return;
      }

      if (location instanceof Array) {
        latLng = new google.maps.LatLng(location[0], location[1]);
      }

      if (location instanceof google.maps.LatLng){
        latLng = location;
      }

      if (latLng){
        if (this.map){ this.map.setCenter(latLng); }
        if (this.marker){ this.marker.setPosition(latLng); }
      }
    },

    destroy: function(){
      if (this.map) {
        google.maps.event.clearInstanceListeners(this.map);
        google.maps.event.clearInstanceListeners(this.marker);
      }

      this.autocomplete.unbindAll();
      google.maps.event.clearInstanceListeners(this.autocomplete);
      google.maps.event.clearInstanceListeners(this.input);
      this.$input.removeData();
      this.$input.off(this._name);
      this.$input.unbind('.' + this._name);
    },

    // Look up a given address. If no `address` was specified it uses
    // the current value of the input.
    find: function(address){
      this.geocode({
        address: address || this.$input.val()
      });
    },

    // Requests details about a given location.
    // Additionally it will bias the requests to the provided bounds.
    geocode: function(request){
      // Don't geocode if the requested address is empty
      if (!request.address) {
        return;
      }
      if (this.options.bounds && !request.bounds){
        if (this.options.bounds === true){
          request.bounds = this.map && this.map.getBounds();
        } else {
          request.bounds = this.options.bounds;
        }
      }

      if (this.options.country){
        request.region = this.options.country;
      }

      this.geocoder.geocode(request, $.proxy(this.handleGeocode, this));
    },

    // Get the selected result. If no result is selected on the list, then get
    // the first result from the list.
    selectFirstResult: function() {
      //$(".pac-container").hide();

      var selected = '';
      // Check if any result is selected.
      if ($(".pac-item-selected")[0]) {
        selected = '-selected';
      }

      // Get the first suggestion's text.
      var $span1 = $(".pac-container:visible .pac-item" + selected + ":first span:nth-child(2)").text();
      var $span2 = $(".pac-container:visible .pac-item" + selected + ":first span:nth-child(3)").text();

      // Adds the additional information, if available.
      var firstResult = $span1;
      if ($span2) {
        firstResult += " - " + $span2;
      }

      this.$input.val(firstResult);

      return firstResult;
    },

    // Restores the input value using the previous value if it exists
    restoreLastValue: function() {
      if (this.lastInputVal){ this.$input.val(this.lastInputVal); }
    },

    // Handles the geocode response. If more than one results was found
    // it triggers the "geocode:multiple" events. If there was an error
    // the "geocode:error" event is fired.
    handleGeocode: function(results, status){
      if (status === google.maps.GeocoderStatus.OK) {
        var result = results[0];
        this.$input.val(result.formatted_address);
        this.update(result);

        if (results.length > 1){
          this.trigger("geocode:multiple", results);
        }

      } else {
        this.trigger("geocode:error", status);
      }
    },

    // Triggers a given `event` with optional `arguments` on the input.
    trigger: function(event, argument){
      this.$input.trigger(event, [argument]);
    },

    // Set the map to a new center by passing a `geometry`.
    // If the geometry has a viewport, the map zooms out to fit the bounds.
    // Additionally it updates the marker position.
    center: function(geometry){
      if (geometry.viewport){
        this.map.fitBounds(geometry.viewport);
        if (this.map.getZoom() > this.options.maxZoom){
          this.map.setZoom(this.options.maxZoom);
        }
      } else {
        this.map.setZoom(this.options.maxZoom);
        this.map.setCenter(geometry.location);
      }

      if (this.marker){
        this.marker.setPosition(geometry.location);
        this.marker.setAnimation(this.options.markerOptions.animation);
      }
    },

    // Update the elements based on a single places or geocoding response
    // and trigger the "geocode:result" event on the input.
    update: function(result){

      if (this.map){
        this.center(result.geometry);
      }

      if (this.$details){
        this.fillDetails(result);
      }

      this.trigger("geocode:result", result);
    },

    // Populate the provided elements with new `result` data.
    // This will lookup all elements that has an attribute with the given
    // component type.
    fillDetails: function(result){

      var data = {},
        geometry = result.geometry,
        viewport = geometry.viewport,
        bounds = geometry.bounds;

      // Create a simplified version of the address components.
      $.each(result.address_components, function(index, object){
        var name = object.types[0];

        $.each(object.types, function(index, name){
          data[name] = object.long_name;
          data[name + "_short"] = object.short_name;
        });
      });

      // Add properties of the places details.
      $.each(placesDetails, function(index, key){
        data[key] = result[key];
      });

      // Add infos about the address and geometry.
      $.extend(data, {
        formatted_address: result.formatted_address,
        location_type: geometry.location_type || "PLACES",
        viewport: viewport,
        bounds: bounds,
        location: geometry.location,
        lat: geometry.location.lat(),
        lng: geometry.location.lng()
      });

      // Set the values for all details.
      $.each(this.details, $.proxy(function(key, $detail){
        var value = data[key];
        this.setDetail($detail, value);
      }, this));

      this.data = data;
    },

    // Assign a given `value` to a single `$element`.
    // If the element is an input, the value is set, otherwise it updates
    // the text content.
    setDetail: function($element, value){

      if (value === undefined){
        value = "";
      } else if (typeof value.toUrlValue == "function"){
        value = value.toUrlValue();
      }

      if ($element.is(":input")){
        $element.val(value);
      } else {
        $element.text(value);
      }
    },

    // Fire the "geocode:dragged" event and pass the new position.
    markerDragged: function(event){
      this.trigger("geocode:dragged", event.latLng);
    },

    mapClicked: function(event) {
        this.trigger("geocode:click", event.latLng);
    },

    // Fire the "geocode:mapdragged" event and pass the current position of the map center.
    mapDragged: function(event) {
      this.trigger("geocode:mapdragged", this.map.getCenter());
    },

    // Fire the "geocode:idle" event and pass the current position of the map center.
    mapIdle: function(event) {
      this.trigger("geocode:idle", this.map.getCenter());
    },

    mapZoomed: function(event) {
      this.trigger("geocode:zoom", this.map.getZoom());
    },

    // Restore the old position of the marker to the last knwon location.
    resetMarker: function(){
      this.marker.setPosition(this.data.location);
      this.setDetail(this.details.lat, this.data.location.lat());
      this.setDetail(this.details.lng, this.data.location.lng());
    },

    // Update the plugin after the user has selected an autocomplete entry.
    // If the place has no geometry it passes it to the geocoder.
    placeChanged: function(){
      var place = this.autocomplete.getPlace();
      this.selected = true;

      if (!place.geometry){
        if (this.options.autoselect) {
          // Automatically selects the highlighted item or the first item from the
          // suggestions list.
          var autoSelection = this.selectFirstResult();
          this.find(autoSelection);
        }
      } else {
        // Use the input text if it already gives geometry.
        this.update(place);
      }
    }
  });

  // A plugin wrapper around the constructor.
  // Pass `options` with all settings that are different from the default.
  // The attribute is used to prevent multiple instantiations of the plugin.
  $.fn.geocomplete = function(options) {

    var attribute = 'plugin_geocomplete';

    // If you call `.geocomplete()` with a string as the first parameter
    // it returns the corresponding property or calls the method with the
    // following arguments.
    if (typeof options == "string"){

      var instance = $(this).data(attribute) || $(this).geocomplete().data(attribute),
        prop = instance[options];

      if (typeof prop == "function"){
        prop.apply(instance, Array.prototype.slice.call(arguments, 1));
        return $(this);
      } else {
        if (arguments.length == 2){
          prop = arguments[1];
        }
        return prop;
      }
    } else {
      return this.each(function() {
        // Prevent against multiple instantiations.
        var instance = $.data(this, attribute);
        if (!instance) {
          instance = new GeoComplete( this, options );
          $.data(this, attribute, instance);
        }
      });
    }
  };

})( jQuery, window, document );