vsGoogleAutocomplete

Angularjs autocomplete module using Google Maps JavaScript API v3 and embedded autocomplete validator

- Demo
- Features
- Install
- Getting started
- Autocomplete options
- Parsing address components
- Embedded validator
- Default usage
- Additional validators
- Validation errors
- Custom validators
- Author
- License
- Credits

Demo

- Demo
- Demo with validator

Features

- Has special embedded validator for autocomplete validation
- Can easy parse address components through special directives
- Uses google formatted address as result of autocomplete
- Uses last version of Google Maps JavaScript API (v3)

Install

#### Bower
``bash
bower install vs-google-autocomplete
`

Getting started

1) Add the Google Places library script to your index.html
` javascript

`
2) Add vs-google-autocomplete.js to your index.html

3) Add vsGoogleAutocomplete module dependency:
` javascript
angular.module('yourApp', ['vsGoogleAutocomplete']);
`
4) Add vs-google-autocomplete directive to input field:
` html



ng-model="address"
name="address"
type="text">



`

Autocomplete options

You can add an options object as attribute parameter, which will restrict autocomplete results.

Options object can contain the following properties:
- types {Array.} (In general only a single type is allowed):
- 'geocode'
- 'address'
- 'establishment'
- '(regions)'
- '(cities)'
- bounds {google.maps.LatLngBounds}
- componentRestrictions {object}

Example:
` html



ng-model="address"
name="address"
type="text">



`
`javascript
$scope.options = {
types: ['(cities)'],
componentRestrictions: { country: 'FR' }
}
`
In example above, autocomplete results will only consist of cities of France.

Parsing address components

You can bind your model with autocomplete address components.

Directives for parsing:
- vs-place - gets place detail results object
- vs-place-id - gets unique identifier denoting place
- vs-street-number - gets street number of place
- vs-street - gets street name of place
- vs-city - gets city name of place
- vs-state - gets state name of place
- vs-country-short - gets country iso code of place
- vs-country - gets country name of place
- vs-latitude - gets latitude of place
- vs-longitude - gets longitude of place
- vs-post-code - gets postcode of place
- vs-district - gets district of place (administrative_area_level_2)

Example:
` html



ng-model="address.name"

vs-place="address.place"
vs-place-id="address.components.placeId"
vs-street-number="address.components.streetNumber"
vs-street="address.components.street"
vs-city="address.components.city"
vs-state="address.components.state"
vs-country-short="address.components.countryCode"
vs-country="address.components.country"
vs-district = "address.components.district"

name="address"
type="text">



`

Embedded validator

Module, as an addition, also provides special validator for autocomplete validation.

$3

1) Add vs-autocomplete-validator.js to your index.html

2) Add vs-autocomplete-validator directive to input field:
` html



vs-autocomplete-validator
ng-model="address"
name="address"
type="text">



`
By default, validator checks if autocomplete result is a valid google address (selected from drop down list).

$3

You can add additional validator by adding denormalized validator name as attribute parameter. If you need more than one additional validator, you can add validator names using comma(,) separator.

Validator names in html are normalized in javascript code, so validator with name vsStreetAddress should have name vs-street-address in html.

Available validator names
- vsStreetAddress - normalized name of validator, which checks if autocomplete result is full address (street number, street, ...)

This module is under development and now it has only one additional validator (and one by default). Please, if you need other additional validators, you can write about this in issues, we will be grateful to you :).

Example
` html



vs-autocomplete-validator="vs-street-address"
ng-model="address"
name="address"
type="text">



`
In the example above validator will checks if autocomplete result is a valid google address and if it is a full address (street number, street, ...).

$3

Validator publishes validation errors if validation is failed.

If validation is failed, validator publish error with name vsAutocompleteValidator to NgModelController.$error hash object and name of each embedded validator to NgModelController.vsAutocompleteErorr hash object.

$3

You can also add your own validator for your own needs. Embedded validator should validate PlaceResult object, which returns after autocomplete. For this, you should add factory to your main module, which must return function.

Custom validator template:
`javascript
angular.module('yourApp')
.factory('validatorName', function() {
/**
* Implementation of custom embedded validator.
* @param {google.maps.places.PlaceResult} PlaceResult object.
* @return {boolean} Valid status (true or false)
*/
function validate(place) {
// ...
}

return validate;
});
`
Rules for custom validator:
- you should add factory to any module of your app
- factory must always return function (embedded validator implementation)
- function for validation always gets PlaceResult object as parameter
- you should implement function, which returns
- factory name - it is normalized embedded validator name (eg. 'validatorName' in factory can be 'validator-name' in html)

After adding custom validator, you should add its name as attribute parameter to vs-autocomplete-validator directive. Validator with name someValidatorName in factory should have name some-validator-name in html.

Core developers can inject in validator factory vsGooglePlaceUtilityservice, which contains useful functionality for working with PlaceResult object (parameter of function for validation). You can look at this utility service in vs-autocomplete-validator.js` :).

Author

K.Polishchuk (http://github.com/vskosp)

License

MIT © K.Polishchuk

Credits

Google Maps JavaScript API https://developers.google.com/maps/documentation/javascript/places-autocomplete