icalialabs / sepomex-form-plugin Goto Github PK

SepomexForm with Google Maps integration facilitates the use of forms with addresses in your application.

SepomexForm helps you to easily manage your forms with address information.

SepomexForm brings you easy implementation of form filling using Google Maps Api, by automatically filling fields based on a Google Maps marker, and by placing markers based on form information.

SepomexForm has a second functionality, by using the Sepomex API, it allows fields of your form to be automatically filled when typing more specific information. See below for examples and a more thorough explanation.

SepomexForm has even a third functionality! It migrates all data from Sepomex Api to JSModels

1. Install sepomex-form-plugin via npm:

   	run npm install sepomex-form-plugin

2. Include Google Maps Api. You will need an API key, if you don't have one you can get it here:

   <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

3. Include plugin's code:

   	<script src="./node_modules/sepomex-form-plugin/dist/sepomex-form-plugin.min.js"></script>

4. Call the plugin:

   $.fn.sepomexForm();

1. Include jQuery:

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

2. Include Google Maps Api. You will need an API key, if you don't have one you can get it here:

   <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

3. Include plugin's code:

   <script src="dist/sepomex-form-plugin.js"></script>

4. Call the plugin:

   $.fn.sepomexForm();

1. Include jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

2. Include plugin's code:

<script src="dist/sepomex-form-plugin.js"></script>

3. Call the plugin:

  $.fn.sepomexForm();

• Configuring SepomexForm
  • Default config
• Configuring AutocompleteForm
  • Default config
• [Using JS Models]
  • Usage
• Contributing
• Heroes

By default SepomexForm uses the following IDs in order to know what fields have to be filled, if you wish to use the default configuration then you must use these ids in you containers otherwise SepomexForm will not behave as expected.

  {
    formContainer: "#AddressForm",
    mapContainer: "#MapWrapper",
    numberContainer: "#AddressNumber",
    streetContainer: "#AddressStreet",
    suburbContainer: "#AddressSuburb",
    cityContainer: "#AddressCity",
    stateContainer: "#AddressState",
    countryContainer: "#AddressCountry",
    zipCodeContainer: "#AddressZipCode"
  }

If you wish to use different ids as the default ones, SepomexForm allows you to override them. In order to do that use the following, before calling the plugin.

  $.fn.sepomexForm.defaults.formContainer = "#CustomFormContainer";
  $.fn.sepomexForm.defaults.mapContainer = "#CustomMapContainer";

  // Plugin call
  $.fn.sepomexForm();

By default AutCompleteForm uses the following IDs in order to know what fields have to be filled, if you wish to use the default configuration then you must use these ids in you containers otherwise AutCompleteForm will not behave as expected.

  {
    suburbContainer: "#AddressSuburb",
    cityContainer: "#AddressCity",
    stateContainer: "#AddressState",
    zipCodeContainer: "#AddressZipCode"
  }

If you wish to use different ids as the default ones, AutoCompleteForm allows you to override them. In order to do that use the following, before calling the plugin.

  $.fn.autocompleteForm.defaults.suburbContainer = "#CustomSuburbContainer";
  $.fn.autocompleteForm.defaults.cityContainer = "#CustomCityContainer";
  $.fn.autocompleteForm.defaults.stateContainer = "#CustomStateContainer";
  $.fn.autocompleteForm.defaults.zipCodeContainer = "#CustomZipCodeContainer";

  // Plugin call
  $.fn.autocompleteForm();

SepomexForm migrates the data from [SepomexApi] to JsModels. Please refer to its documentation for more about it. here

Please submit all pull requests against a separate branch. Please follow the standard for naming the variables, mixins, etc.

Ana Paola Treviño

• http://github.com/Anapaotrev

Erik Torres

• http://github.com/erik0686

René García

• http://github.com/ReneSG

Code and documentation copyright 2015 Icalia Labs. Code released under the MIT license.